Question

我是骨干的新手，并且一直致力于我的第一款应用。我一直试图通过下划线模板显示一个集合，但是我的内容没有显示出来。模板存在于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;
        }   
    });

这是我的模板：

 <% _.each(vendors, function(vendor) { %>
    <li><% vendor %></li>
    <li class="first-name">
        <h1><%= vendor.get('firstName') %></h1>
    </li>
    <li class="last-name">
        <h2><%= vendor.get('lastName') %></h2>
    </li>
    <li class="address">
        <span><%= vendor.get('address') %></span>
    </li>
    <li class="city">
        <span><%= vendor.get('city') %></span>
    </li>
    <li class="state">
        <span><%= vendor.get('state') %></span>
    </li>
    <li class="zip">
        <span><%= vendor.get('zip') %></span>
    </li>
    <li class="venue">
        <strong style="font-weight:bold">
            <%= vendor.get('venue') %>
        </strong>
    </li>
    <li class="event-date">
        <span>
            <%= vendor.get('eventDate') %>
        </span>
    </li>
    <li class="summary">
        <p><%= vendor.get('summary') %></p>
    </li>
<% }); %>

这是我实例化新实例的地方：

// Some Vendors
var someVendors = [ 
{
    firstName : 'Mister', 
    lastName : 'Jones', 
    address : '48 Allston Street', 
    city : 'Boston', 
    state : 'MA', 
    zip : '02125', 
    venue : 'Royale', 
    eventDate : '07/21/2015', 
    summary : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus sunt eligendi consectetur ab natus iusto obcaecati temporibus nisi explicabo adipisci quia amet ullam maiores culpa cumque ipsum consequuntur nulla neque.'
},    
{
    firstName : 'Rick',
    lastName : 'James', 
    address : '48 Orchard Street', 
    city : 'New York', 
    state : 'NY', 
    zip : '02125', 
    venue : 'House of Blues', 
    eventDate : '06/11/2015', 
    summary : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus sunt eligendi consectetur ab natus iusto obcaecati temporibus nisi explicabo adipisci quia amet ullam maiores culpa cumque ipsum consequuntur nulla neque.'
}

];


$(function(){   

    // Define Model
    var vendor = new SimpleVendor.Models.Vendor({});

    // Data
    var vendors = new SimpleVendor.Collections.Vendors(); // End Data

    vendors.reset(someVendors);

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

    $('section ul').append(vendorList.render().el);


})

我正在慢慢学习，但一直坚持这个问题。

Answer 1

在_.template(this.template, vendors)中，您正在重新编译已编译的模板。 Undescore期望一个字符串作为它的第一个参数，但是它接收一个函数和扼流圈。 ¹由于您将模板作为视图的属性，因此请使用
```
var html = this.template(...);
this.$el.html(html);
```
您正在将数组传递给模板（this.collection.toJSON()），但它需要一个具有vendors键的对象。使用
```
var html = this.template({
    vendors: vendors
});
```
通过使用this.collection.toJSON()，您可以将Backbone模型集合转换为普通对象数组。这意味着您的模板无法使用模型的方法，但必须使用点符号：vendor.firstName而不是vendor.get('firstName')，vendor.lastName而不是vendor.get('lastName')等等< / p>

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

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

vendorList.render();

请参阅http://jsfiddle.net/vrqfeLa5/了解演示

¹请注意，不建议立即将数据传递给_.template。您必须首先编译模板，然后使用它：_.template(source as string)(data)

我的下划线模板不会在我的Backbone App中呈现我的集合

1 个答案: