Question

我正在尝试使用Backbone和Marionette的模块实现面包屑。

我的想法是，对UL标签逐个添加LI标签。

在我的HTML中，我有一个名为'Breadcrumb'的UL标签。

我创建了breadcrumb模块，如下所示：

App.module("BreadcrumbModule", function(BreadcrumbModule){

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

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

var BreadcrumbView = Backbone.View.extend({
    tagName : 'li',
    render : function() {
        $(this.el).html('<a href="#' + this.model.get('link') + '" class="tabSection">' + this.model.get('name') + '</a>');
        return this;
    }
});

var BreadcrumbListView = Backbone.View.extend({
    el : '#Breadcrumb',

    initialize : function() {
        _.bindAll(this, 'render', 'appendBreadcrumb');
        this.collection = new BreadcrumbList();
        this.collection.bind('add', this.appendBreadcrumb);
    },

    render:function(){ 
        $.each(this.collection.models, function(i, breadcrumb){
            self.appendBreadcrumb(breadcrumb);
        });
    },

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

        // THIS IS NOT WORKING!
        $(this.el).append(breadcrumbView.render().el);
    }
});

// Public function    
BreadcrumbModule.getBreadcrumbListView = function(){
    return new BreadcrumbListView();
}

BreadcrumbModule.getBreadcrumb = function(breadcrumb){
    return new Breadcrumb(breadcrumb);
}
});

试图在同一模块中访问：

breadcrumbListView = new BreadcrumbListView();
breadcrumb = new Breadcrumb({name : 'Home',link : 'home'});
breadcrumbView = new BreadcrumbView({model:breadcrumb});    
breadcrumbListView.collection.add(breadcrumb);

在另一个模块中，我将一个项目添加到breadcurmb，如下所示：

this.breadcrumbListView = App.BreadcrumbModule.getBreadcrumbListView();
breadcrumb = App.BreadcrumbModule.getBreadcrumb({link: 'home', name: 'Home'});
this.breadcrumbListView.collection.add(breadcrumb);

在这两种情况下它都不起作用。我检查了LI标签是否正确生成。但它没有将值添加到BreadcrumbListView的el'#Breadcrumb'。

在函数appendBreadcrumb（）中，如果我给出如下也不起作用，但是它从firebug开始工作。

 $('#Breadcrumb').html('ADD SOME TEXT');

但是我的主容器$（'＃contentContainer'）有范围，我们可以为它设置值。

contentContainer - ＆gt;在HTML中。

面包屑 - ＆gt;在模板文件中。

这意味着从视图中我无法将值设置为来自模板文件的id。

注意：我没有使用RequireJS。

如何解决此问题？

谢谢！

//散。

使用Backbone Marionette模块的面包屑

0 个答案: