Question

我想在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。

Answer 1

问题出现在旧版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,
});

树形视图不在Backbone Marionette中渲染

1 个答案: