骨干：失去对实际视图的参考？

Question

我是 Backbone（和 Marionette）的新手，并尝试使用两者编写一个非常简单的应用程序。该应用程序在左侧导航中有一个“组”菜单，在右主 div 上有一个“条目”列表。每次单击组菜单项时，我都会过滤具有组 ID 的条目并在隐藏所有其他项时显示它们。

这里是 Entry Item 视图（顺便说一句，所有脚本都在 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()

这里是 Entry List 视图，扩展了 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 确实会调用每个 EntryItemView 对象的 show() 和 hide() 方法。问题是，看起来这个对象和实际 HTML 之间的引用不存在，所以实际元素 <tr> 没有显示或隐藏。

你们能指出我在这里做错了什么吗？提前致谢。

Answer 1

这里有几个提示：

• 由于您的模板在 HTML 中，您只需使用 template: "#entryItemTemplate" 指定 jQuery 选择器
• 您可以删除 render 声明，因为 Marionette 会自行执行此操作（即您正在实现默认行为）
• 除非您知道自己在做什么，否则通常不会在集合视图中声明el 属性。相反，您声明一个区域（可能在布局内），您将在其中调用 show 方法来显示视图实例

您的代码可能不起作用的原因是它看起来像 Backbone 代码，其中包含一些 Marionette 的东西。看看free sample 到我的book on Marionette。它应该可以帮助您快速开始使用 Marionette，并将解释您在此处尝试完成的大部分工作。