切换树列表 Backone 和木偶中的分支

我有一个使用Backone和木偶的嵌套树列表。 我想通过单击分支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"
                }
            ]
        }
    ]
};