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

Question

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

当我点击树中的二级节点展开它们时出现错误。单击 Car 或 Truck 节点最终会关闭分支而不是打开下一层。我不确定如何修复此错误。

这是我的代码 fiddle：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 class 的嵌套元素。当您单击父元素时，会显示子 .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 的复杂性增加，这将开始引起问题。

编辑：不，您使用的是复合视图，它非常适合渲染树木。

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

Toggle Tree List Branches in Backone and Marionette

javascript

jquery

backbone.js

marionette