0

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

这是条目列表视图，扩展了 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>不会显示或隐藏。

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

4

1 回答 1

1

这里有几个指针：

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

您的代码可能不起作用的原因是它看起来像 Backbone 代码，其中包含一些 Marionette 的东西。看看我关于 Marionette 的书的免费示例。它应该可以让您快速开始使用 Marionette，并将解释您在此处尝试完成的大部分内容。

于 2013-10-21T14:17:51.130 回答