带骨干的面包屑。木偶

Question

我正在尝试使用Marionette.CollectionView 和Marionette.ItemView 实现面包屑导航。我想从模块的任何部分将面包屑添加到列表中。

这是我写的模块：

App.module("BreadcrumbModule", function(BreadcrumbModule){
var instance;

var Breadcrumb = Backbone.Model.extend({
    defaults:{
        link        : '',
        name        : ''            
    } 
});

BreadcrumbModule.BreadcrumbList = Backbone.Collection.extend({
    model : Breadcrumb
});

var BreadcrumbView = Marionette.ItemView.extend({
    tagName : 'li',

    render : function() {
        var liData = '';
        if(this.model.get('link') == '#') {
            liData = 'You are here: ';
        } else {
            liData = '<a href="#' + this.model.get('link') + '" class="tabSection">' + this.model.get('name') + '</a>';
        }

        $(this.el).html(liData);
        return this;
    }
});

BreadcrumbModule.BreadcrumbListView = Marionette.CollectionView.extend({
    tagName: "ul",
    id: "Breadcrumb",                

    itemView: BreadcrumbView,        

    initialize : function() {                       
        this.collection = new BreadcrumbModule.BreadcrumbList();                   

        this.collection.bind('add', this.appendBreadcrumb);       

        //this.collection.add({link: '#', name: 'You are here : '});
        this.listenTo(this.collection, "add", this.appendBreadcrumb);   
    },

    addBradcrumb: function(breadcrumbList){

        breadcrumbList.forEach(function(breadcrumb) {
            //console.log(breadcrumb);
            this.collection.add(breadcrumb);
        }, this);
    },      

    appendBreadcrumb: function(breadcrumb) {
        var breadcrumbView = new BreadcrumbView({
            model : breadcrumb
        });            

        $(this.el).append(breadcrumbView.render().el);
    }
});

// Singleton
BreadcrumbModule.getInstance = function() {
    if(!BreadcrumbModule.instance) {
        instance = new BreadcrumbModule.BreadcrumbListView();
    } 

    return instance;        
}        

});

我访问此模块的计划如下：

 //var breadcrumbs = []; 
 //breadcrumbs.push({link: 'book', name: 'Book'});

 //var breadcrumbListView = App.BreadcrumbModule.getInstance();

 var breadcrumb = new App.BreadcrumbModule.Breadcrumb({link: '#', name: 'You are here: '});
 var breadcrumbList = new App.BreadcrumbModule.BreadcrumbList();  
        breadcrumbList.add(breadcrumb);
 breadcrumbListView.addBradcrumb(breadcrumbs);

我可以看到默认的显示（“你在这里：”），当我添加新的面包屑时，“收藏”正在增长，但它没有反映在视图中。

可能是什么原因？

我该如何解决？

谢谢！

//圣。

Answer 1

我在 JSFiddle 上写了一个简单的例子：http://jsfiddle.net/zaSvT/ 与您的代码的主要区别是：

CollectionView 正在监听它的集合，并在每次集合更改时重新渲染（例如

var BreadcrumbListView = Marionette.CollectionView.extend({
        el         : '#breadcrumbs',
        childView  : BreadcrumbItemView,
        initialize : function(){
            this.listenTo(this.collection, 'change', this.render );
            this.render();
        }
    });

在这里我只是用一个新的集合（从 1 个虚拟项目开始）实例化它：

var breadcrumbCollection = new Backbone.Collection([{ name : 'foo', url : 'foo' }]);

var breadcrumbView = new BreadcrumbListView({
    collection : breadcrumbCollection
});

当我向集合中添加新项目时，它会自动出现：

breadcrumbCollection.add({ name : 'foo', url : 'bar' });