Я новичок в Backbone (и Marionette) и пытаюсь написать довольно простое приложение с использованием обоих. В приложении есть меню "групп" на левом навигаторе и список "записей" в главном правом div. Каждый раз, когда нажимается элемент меню Group, я фильтрую записи с идентификатором группы и показываю их, когда скрывают все остальные.
Вот вид элемента ввода (все скрипты находятся в CoffeeScript).
class EntryItemView extends Backbone.Marionette.ItemView
tagName: 'tr'
template: _.template $('#entryItemTemplate').html()
render: ->
@$el.html @template(@model.toJSON())
show: ->
@$el.show()
hide: ->
@$el.hide()
Вот вид списка записей, расширяющий Marionette CollectionView:
class EntryListView extends Backbone.Marionette.CollectionView
itemView: EntryItemView
el: '#main tbody'
Это AppRouter, в значительной степени простой:
class AppRouter extends Backbone.Router
routes:
'group/:id' : 'showGroup'
router = new AppRouter()
router.on 'route:showGroup', (id) ->
_.each entryViews, (view) ->
if view.model.get('group_id') is parseInt(id)
view.show()
else
view.hide()
(Переменная entryViews
- это простой глобальный массив для хранения всех экземпляров EntryItemView).
При таком подходе навигация к /group/: id действительно вызывает метод show() и hide() для каждого объекта EntryItemView. Проблема в том, что похоже, что ссылка между этим объектом и фактическим HTML не существует, поэтому фактический элемент <tr>
не отображается или не скрывается.
Можете ли вы, ребята, указать, что я здесь делаю неправильно? Заранее спасибо.
Вот несколько указателей:
template: "#entryItemTemplate"
render
, потому что Marionette делает это самостоятельно (т.е. вы реализуете поведение по умолчанию)el
в представлении коллекции. Вместо этого вы объявляете регион (возможно, в макете), где вы вызываете метод show
для отображения экземпляра представленияПричина, по которой ваш код, вероятно, не работает, заключается в том, что он выглядит как базовый код с некоторыми материалами Marionette, заброшенными. Взгляните на бесплатный образец моей книги о Marionette. Это должно заставить вас начать быстро с Marionette и объяснит большую часть того, что вы пытаетесь выполнить здесь.