Backbone Marionette 中未呈现树视图

Tree view is not rendering in Backbone Marionette

我想在 Backbone Marionette 中显示树。 为此,我创建了一个模型

applicationManager.Models.menuItem = Backbone.Model.extend({

    initialize: function(){

        var 
        children = this.get('children');

        if (children){

            this.children = new applicationManager.Collections.menu(children);
            this.unset('children');
        }
    }     
});

合集

applicationManager.Collections.menu = Backbone.Collection.extend({

    model: applicationManager.Models.menuItem,
    url: '/en/panel/menu'
});

递归视图

applicationManager.Views.menuItem = Backbone.Marionette.CompositeView.extend({

    tagName: 'li',
    template: '#menu-template',
    initialize: function(){

        this.collection = this.model.children;
    },
    appendHtml: function(collectionView, childView) {

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

        if (_.isUndefined(this.collection)){

            this.$('ul:first').remove();
        }
    }
});

和根视图

applicationManager.Views.menu = Backbone.Marionette.CollectionView.extend({

    tagName: 'ul',
    childView: applicationManager.Views.menuItem
});

我的申请代码是

var 
menu = new applicationManager.Collections.menu();

menu.on('reset', function(data){

    var
    view = new applicationManager.Views.menu({

        collection: data
    });

    applicationManager.getRegion('menuRegion').show(view);
});

menu.fetch({

    reset: true
});

但是代码执行的时候,不是树结构。元素彼此连续。

谁能帮帮我?

此致,Evgeniy。

问题出在旧版本 Marionette 的代码中。

现在我用这个

applicationManager.Views.menuItem = Backbone.Marionette.CompositeView.extend({

    tagName: 'ul',
    template: '#menu-template',

    initialize: function(){

        this.collection = this.model.children;
    },
    attachHtml: function(collectionView, childView){

        collectionView.$('li:first').append(childView.el);
    }
});

applicationManager.Views.menu = Backbone.Marionette.CollectionView.extend({

    childView: applicationManager.Views.menuItem,
});