Question

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

这是Entry Item视图（所有脚本都是CoffeeScript btw）：

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"
您可以删除render声明，因为Marionette会自行执行此操作（即您正在实施默认行为）
除非您知道自己在做什么，否则通常不会在集合视图中声明el属性。而是声明一个区域（可能在布局中），您将调用show方法来显示视图实例

您的代码可能无法正常工作的原因是它看起来像Backbone代码，其中包含一些Marionette内容。请查看free sample到book on Marionette。它应该让你快速开始使用Marionette，并解释你在这里要完成的大部分工作。

Backbone：失去对实际视图的引用？

1 个答案: