Javascript 主干：失去对实际视图的引用？

我对主干网（和木偶网）还不熟悉，我正试图用这两种技术编写一个非常简单的应用程序。该应用程序在左导航上有一个“组”菜单，在右主分区上有一个“条目”列表。每次单击组菜单项时，我都会用组ID过滤条目，并在隐藏所有其他条目时显示它们

这是条目视图（所有脚本都在CoffeeScript btw中）：

以下是条目列表视图，扩展了木偶的CollectionView：

class EntryListView extends Backbone.Marionette.CollectionView
    itemView: EntryItemView
    el: '#main tbody'

这是一个认可的，非常直截了当的理由：

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之间的引用不存在，因此实际元素

不会显示或隐藏

---

你们能指出我做错了什么吗？提前感谢。

这里有几点建议：

• 由于您的模板在HTML中，因此只需使用

  template:“\entryItemTemplate”

• 您可以删除

  render

  声明，因为木偶网是自己完成的（即，您正在实现默认行为）
• 除非您知道自己在做什么，否则通常不会在集合视图中声明

  el

  属性。而是声明一个区域（可能在布局中），在该区域中调用

  show

  方法来显示视图实例

---

您的代码可能无法工作的原因是，它看起来像是插入了一些木偶的主干代码。看一看我的照片。它会让你快速开始使用木偶，并解释你在这里要完成的大部分工作。

你说得对，这是一个主干，里面有一些木偶代码。你的书看起来也很棒，我正在考虑买它。但首先我想知道为什么我的代码不起作用，以便更好地了解主干网的概念。看看这个示例，它应该能回答您的问题。本质上，你的代码是被破坏的，因为你没有用主干的方式做事，但你也没有用木偶的方式做事。最终结果：事情没有按照你的意愿去做。免费的pdf将解释木偶的基础知识，然后你应该能够修复你的代码。是的，我已经用木偶的方式重新构建了我的应用程序，现在它开始看起来不错了。谢谢你，大卫！没问题！一旦您开始了解各种木偶件是如何协同工作的，编码就会容易得多；-）

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()