如何在Backbone.js中呈现嵌套视图？

Question

我有一个类别树，希望使用Backbone.js进行渲染，而不是使用jQuery或在服务器端进行渲染。 我已经描述了以下模板：

<li>
    <select class="categories">
        <option value="">Select</option>
    </select>
    <input class="edit" type="button" value="Edit">
    <input class="add" type="button" value="Add">
</li>

我将标签select单独呈现为内部视图。当我改变时，需要从服务器获取嵌套类别，并将它们附加到包含在ul标签中的上述模板的li标签中。在外部视图中，我创建内部视图并监听编辑和添加的点击事件。当嵌套级别超过一级时，我遇到了最后一个事件的问题，因为它们的触发次数与嵌套级别相同。我做错了什么？下面的代码片段展示了我如何处理外部和内部视图： var CategoriesInnerView = Backbone.View.extend({ tagName: 'select', initialize: function(){ _.bindAll(this,'addOne','addAll'); this.collection.bind('reset',this.addAll); }, addOne: function(category){ this.$el.append(new CategoryView({model:category}).render().el); }, addAll: function(){ this.collection.each(this.addOne); }, events: { 'change':'changeSelected' }, changeSelected:function(){ var children = new Categories(); children.url = 'categories/' + this.$el.val(); var childrenView = new CategoriesOuterView({collection:children}); this.$el.parent().find('ul').remove(); this.$el.parent().append(childrenView.render().el); children.fetch(); } }); var CategoriesOuterView = Backbone.View.extend({ tagName: 'ul', template: _.template($('#categories-template').html()), initialize:function(){ this.inner = new CategoriesInnerView({collection:this.collection}); }, render: function(){ this.$el.html(this.template); this.inner.setElement(this.$('select')).render(); return this; }, events: { 'click .edit':'edit', 'click .add': 'add' }, edit: function(){ this.renderForm(this.collection.get(this.inner.$el.val())); }, add: function(){ this.renderForm(new Category()); }, renderForm:function(category){ // some code to render the form } });

- Igor Timoshenko

---

使用Backbone.js而不是jQuery，Backbone没有任何内置的渲染功能。 - Prinzhorn

是的，我知道。我错了。 - Igor Timoshenko

Answer 1

当您设置嵌套视图时，您必须考虑到事件会冒泡到DOM树，并且Backbone在view.el级别处理DOM事件。这意味着在您的情况下，如果让事件向上冒泡，则嵌套节点也会触发父节点中的事件。

请参见http://jsfiddle.net/PX2PL/了解演示。

您可以在回调函数中停止事件传播来解决此问题。

var CategoriesOuterView = Backbone.View.extend({
    events:    {
        'click .edit':'edit',
        'click .add': 'add'
    },
    edit: function(e) {
        e.stopPropagation();
        this.renderForm(this.collection.get(this.inner.$el.val()));
    },
    add: function(e) {
        e.stopPropagation();
        this.renderForm(new Category());
    }
}

以下是更新后的演示http://jsfiddle.net/PX2PL/1/

- nikoshr

---

谢谢你的回答，我已经用同样的方法解决了。 - Igor Timoshenko

Answer 2

我们真的需要看一些你的代码才能更好地回答这个问题，但听起来可能是以下两种情况之一：

1）您在同一元素上多次实例化视图

2）您的事件选择器过于宽泛

但是，如果没有实际看到（相关部分的）视图，很难说更多。

---

与主题不太相关的侧面说明

顺便说一下，当您有这样的情况时，有两种基本方法：

1）您可以让父视图创建子视图，并将事件处理放在子视图上

2）您可以让父视图创建子视图或不创建（它可以自己创建所有HTML），并将事件处理放在上面。

#1的优点是简单性：您的事件处理程序只需引用this即可引用相应的视图。 然而，如果您必须将其扩展太多，#1就会有问题：数百万个视图，每个都有自己的事件处理程序，会影响性能。

因此，如果性能很重要/将会变得重要，那么#2更好，因为您只需要进行一组事件连接。 但是，您的事件处理程序将必须更智能，因为它们将不得不根据提供的事件（即e.target与#1方法中的this）来确定它们正在处理哪个元素。

- machineghost

---

说句实话，我有4-5层嵌套的视图，而路由1总是非常简单和容易实现的。 - asawyer

理论上来说，无论你有多少层嵌套，如果采用方法1，实现起来都应该非常简单和容易。方法2也不难（只是比方法1更难）。但当然（正如你正在发现的那样），魔鬼肯定在细节中。 - machineghost