Javascript 我的下划线模板赢了'；t在我的主干应用程序中呈现我的收藏_Javascript_Backbone.js_Requirejs_Underscore.js_Underscore.js Templating

Javascript 我的下划线模板赢了'；t在我的主干应用程序中呈现我的收藏

javascript backbone.js requirejs

Javascript 我的下划线模板赢了'；t在我的主干应用程序中呈现我的收藏,javascript,backbone.js,requirejs,underscore.js,underscore.js-templating,Javascript,Backbone.js,Requirejs,Underscore.js,Underscore.js Templating,我是主干网新手，一直在开发我的第一个应用程序。我一直试图通过下划线模板显示一个集合，但是我的内容没有显示出来。模板存在于require中，并且正在拉入一个html文件，它被定义为venderDetail 我的假设是，我的对象没有被传递到模板标记中，但我不确定如何在html内部测试它是否存在以下是我处理集合/模型/视图的代码： // Define our object that will contain our modals, collections, and views var Sim

我是主干网新手，一直在开发我的第一个应用程序。我一直试图通过下划线模板显示一个集合，但是我的内容没有显示出来。模板存在于require中，并且正在拉入一个html文件，它被定义为venderDetail

我的假设是，我的对象没有被传递到模板标记中，但我不确定如何在html内部测试它是否存在

以下是我处理集合/模型/视图的代码：

// Define our object that will contain our modals, collections, and views
    var SimpleVendor = {
        Models : {},
        Collections : {},
        Views : {}
    }

    // Define our Modal
    SimpleVendor.Models.Vendor = Backbone.Model.extend({
        defaults : {
            firstName : '',
            lastName : '',
            address : '',
            city : '',
            state : '',
            zip : '',
            venue : '',
            website : '',
            eventDate : '',
            summary : ''
        },
        urlRoot : '/vendor'
    });

    SimpleVendor.Collections.Vendors = Backbone.Collection.extend({
        model : SimpleVendor.Models.Vendor,
        url : '/vendor'
    });

    SimpleVendor.Views.VendorsList = Backbone.View.extend({

        tagName : '<li>',

        template : _.template(vendorDetail),

        className : 'vendorDir',

        initialize: function() {
            console.log(this.template);
        },

        render : function () {

            var vendors = this.collection.toJSON();

            this.$el.html( _.template(this.template, vendors) );

            return this;
        }   
    });

我正在慢慢地学习，但一直被困在这个问题上

在

\uuu.template（this.template，vendors）

中，您正在重新编译一个已编译的模板。Undescore期望字符串作为其第一个参数，但收到函数并阻塞它。1由于您将模板作为视图的属性，请使用

var html = this.template(...);
this.$el.html(html);

您正在向模板（

this.collection.toJSON（）

）传递一个数组，但它需要一个具有

vendors

键的对象。使用

var html = this.template({
    vendors: vendors
});

通过使用

this.collection.toJSON（）

可以将主干模型集合转换为普通对象数组。这意味着您的模板不能使用模型的方法，但必须使用点符号：

vendor.firstName

而不是

vendor.get（'firstName'）

，

vendor.lastName

而不是

vendor.get（'lastName'）

等等

最后，您已经将DOM节点传递给视图，不需要渲染/附加等。使用

var vendorList = new SimpleVendor.Views.VendorsList({
    el : $('.section ul'),
    collection : vendors, 
    model : vendor
});

vendorList.render();

请参见演示

1请注意，不推荐立即将数据传递给。您必须首先编译模板，然后使用它：

.template（源代码为字符串）（数据）

在

\uuu.template（this.template，vendors）