主干:丢失对实际视图的引用

Backbone: Lost reference to actual view?

本文关键字：视图 引用 主干      更新时间：2023-09-26

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

这是条目项视图（所有脚本都在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()

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

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>不显示或隐藏。

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

这里有几个提示：

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

你的代码可能不起作用的原因是它看起来像 Backbone 代码，里面有一些木偶的东西。看看我关于木偶的书的免费样品。它应该让你快速开始使用木偶，并将解释你在这里试图完成的大部分工作。

相关文章：