Question

我正在尝试在Backbone中创建一个简单的列表，但遇到了一个奇怪的问题。这是我第一次使用下划线模板，所以我不确定是不是这个原因。这似乎是一个简单的问题，但我无法弄清楚。

我的骨干模型的属性为name和band。当我只渲染name时，如下所示，它会成功呈现名称列表。

var template = _.template("<h2><%= name %></h2><br><h3></h3>")

这很好。但是当我对band变量进行任何迭代时，它会抛出错误Uncaught ReferenceError: band is not defined，我无法弄清楚原因。它从我传递的属性对象中获取名称的引用。为什么会看到name而不是band？

以下完整代码。

var Album = Backbone.Model.extend({
    defaults: {name: "The Album", band: "The Band"}
});
var albumOne = new Album({name: "SGT PEPPER", band: "The Beatles"});
//Eight more album instances here

var template = _.template("<h2><%= name %></h2><br><h3><%=band%></h3>")

var AlbumCollection = Backbone.Collection.extend({
    model: Album,
    initialize: function(){
        this.render()           
    },
    render: function(){
        this.each(function(item){
            new tempView(item);
        });
    }
});
var tempView = Backbone.View.extend({
    tagName: 'li',

    template: template(),

    initialize: function(){
        this.render();
    },
    el: $("#shuff"),
    render: function(){ 
        this.$el.append(template(this.attributes))
    }
});

window.myCollection = new AlbumCollection([albumOne, albumTwo, albumThree, albumFour,albumFive,albumSix,albumSeven,albumEight,albumNine]);
window.myCollection.render();

Answer 1

断点不是您的渲染方法，而是template属性。

您已使用template: template()分配评估模板，但全局上下文（band）上没有window.band且评估中断。它仅适用于name变量window.name is in fact a valid property。

尝试template: template，您的示例将运行http://jsfiddle.net/nikoshr/6j58kf2w/

注意：我必须补充一点，混合模型和视图可能会导致无法预料的问题。我建议尽可能地让模型保持对视图的无知。

使用下划线进行骨干诱惑是在模板中呈现一个属性，而不是在另一个

1 个答案: