javascript - 如何在 Backbone.js 中呈现嵌套 View ？

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 标签我单独渲染为内部 View 。当我更改选择时，我需要从服务器获取嵌套类别，并使用上面的模板将它们附加到标签 li 中，该模板包含在标签 ul 中。在外部 View 中，我创建内部 View 并在编辑和添加时点击监听事件。当嵌套级别超过一个时，我对最后一个事件有麻烦，因为它们的触发次数与嵌套级别相同。我做错了什么？

下面的代码片段显示了我如何处理外部和内部 View :

    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
        }
    });

Answer 1

当您设置嵌套 View 时，您必须考虑到事件会在 DOM 树中向上冒泡，并且 Backbone 在 vi​​ew.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/