Backbone.js 使用主干木偶模块的面包屑

我正在尝试使用主干网和木偶模块来实现面包屑

我的想法是，在UL标签上逐个添加LI标签

在我的HTML中，我有一个id为“Breadcrumb”的UL标签

我创建了面包屑模块，如下所示：

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

在另一个模块中，我将向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'）有作用域，我们可以为其设置值

HTML中的contentContainer->

面包屑->在模板文件中

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

注意：我没有使用RequireJS

如何解决此问题

谢谢大家!

---

//San。

可能与您之前遇到的问题相同，面包屑何时添加到页面？当#Breadcrumb是加载时html的一部分时，我让您的代码在这个代码笔中工作（在木偶之外，但是代码的核心）。谢谢您的回复！我的代码结构是，在一个模块中有一个视图和一个控制器。在视图中，35;.template（）我正在加载HTML模板，其中有可用的“#Breadcrumb”。在控制器的initialize（）中，创建视图的对象后，我正在访问面包屑。当我们创建一个视图对象时，它没有设置它的模板吗？模板加载有以下功能：函数getTemplate（url）{var data=“未能加载url:“+url+”；$.ajax（{async:false，contentType:'text/html'，url:url，success:function（response）{data=response；}）；return data；}在我的视图中，如果DIV id位于HTML中，则可以访问它；如果DIV id位于模板文件中，则无法访问它。如果DIV id是从模板加载的，那么我应该怎么做才能访问视图中的DIV id？因为您已经在使用

木偶

，您肯定应该重构代码以使用其

项目视图

和

集合视图

功能，因为这将使一半的代码冗余：

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