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);

我可以看到默认的一个显示（＆＃34;你在这里：＆＃34;）和＆＃39;集合＆＃39;当我添加新的面包屑但它没有反映在视图中时，它正在增长。

可能是什么原因？

我该如何解决？

谢谢！

//散。

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();
        }
    });

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

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

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

当我向集合添加新项目时，它将自动显示：

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

与Backbone.Marionette的面包屑

1 个答案: