Question

我有一个使用Backone和Marionette的嵌套树列表。我想通过单击分支li来切换每个具有叶子的分支的视图。

当我点击树中的第二级节点以消耗它们时，会出现错误。单击Car或Truck节点最终关闭分支而不是打开下一个级别。我不知道如何修复这个错误。

以下是我的代码的小提琴：http://jsfiddle.net/aeao3Lec/

这是我的JavaScript，数据和模板：

JavaScript的：

var TheModel = Backbone.Model.extend({});

var TheCollection = Backbone.Collection.extend({
    model: TheModel,
});

var App = new Backbone.Marionette.Application();

App.addRegions({
    mainRegion: '.main-region' 
});

var TreeItemView = Backbone.Marionette.CompositeView.extend({
    initialize: function() {
        if ( this.model.get('children') ) {
            this.collection = new TheCollection( this.model.get('children') );
        }
    },

    tagName: 'ul',

    className: 'tree-list',

    template: _.template( $('#tree-template').html() ),

    serializeData: function () {

        return {
          item: this.model.toJSON()
        };
    },

    attachHtml: function(collectionView, childView) {
        collectionView.$('li:first').append(childView.el);
    },

    events: {
        'click .js-node': 'toggle'
    },

    toggle: function(e) {
        var $e = $(e.currentTarget);

        $e.find(' > .tree-list').slideToggle();

    }

});

var TreeRootView = Backbone.Marionette.CollectionView.extend({
    tagName: 'div',
    className: 'tree-root',
    childView: TreeItemView
});


var theCollection = new TheCollection(obj_data);

App.getRegion('mainRegion').show( new TreeRootView({collection: theCollection}) );

模板：

<div class="main-region">
</div>

<script type="text/template" id="tree-template">
    <li class="js-node">
        <% if (item.children) { %>
            Click to toggle -
        <% } %>
        <%- item.title %>        
    </li>
</script>

数据：

var obj_data = {
    "title": "Ford",
    "children": [
        {
            "title": "Car",
            "children": [
                {
                    "title": "Focus",
                },
                {
                    "title": "Taurus"   
                }

            ]
        },
        {
            "title": "Truck",
            "children": [
                {
                    "title": "F-150"
                }
            ]
        }
    ]
};

Answer 1

问题是您的视图有几个带有.js-node类的嵌套元素。当您单击父元素时，您将显示子元素.js-node元素，但是当您单击其中一个元素时，事件会冒泡并重新触发父.js-node上的事件，从而关闭子元素你刚刚点击了。

您可以通过调用

来停止此事件冒泡

e.stopImmediatePropagation();

我已经像这样更新了你的切换方法并且它可以工作：

toggle: function(e) {
    var $e = $(e.currentTarget);
    $e.children('.tree-list').slideToggle();
    e.stopImmediatePropagation(); 
}

http://jsfiddle.net/CoryDanielson/aeao3Lec/2/

我看到的一个更大的问题是你的数据实际上不是一个集合......它是一棵树。 CollectionView实际上用于渲染平面模型数组，而不是嵌套模型。您应该使用嵌套在彼此内部的多个CollectionView渲染此数据...当TreeItemView的复杂性增加时，这将开始导致问题。

编辑：不，你正在使用一个非常适合渲染树的复合视图。

在Backbone和Marionette中切换树列表分支

1 个答案: