Backbone 模板上的变量传递

Question

我刚开始学习 'Backbone.js'，我目前正在关注 this 视频教程。对于模板，我只是让我的模板像这样简单 -

<script type="text/template" id="songlist_template">
<%_.each(songs, function(song){});  %>
<h1>Loaded</h1>
</script>

我的观点扩展为-

var SongList=Backbone.View.extend({
el:'.page',
render: function(){
    var that=this;
    var songs=new Songs();
    songs.fetch({
        success:function (){
            var temp=_.template($("#songlist_template").html());
            var html=temp(songs);
            that.$el.html(html);
            },
        error: function (collection, response, options) {
            alert("error!! "+response.responseText); 
            }})
}});

一切都很完美，直到我到达模板部分 console log 说 -

Uncaught ReferenceError: songs is not defined is not defined.

根据 documentation ，我认为我的模板语法没问题，我已经传递了正确的 获取数据 。此外，我还定义了变量 songs。如果有人能指出我的错误会很有帮助。

完整代码here and json file here.

Answer 1

要解决您的问题，请将歌曲作为数组传递 temp({songs:songs.models})

成功回调可以添加参数songs

  success:function (songs){
            var temp=_.template($("#songlist_template").html());
            var html=temp({songs:songs.models});
            that.$el.html(html);
            },

http://backbonejs.org/#Collection-fetch

The options hash takes success and error callbacks which will both be passed (collection, response, options) as arguments

Answer 2

来自 Underscore 的文档 template:

When you evaluate a template function, pass in a data object that has properties corresponding to the template's free variables

（强调我的）

@VladuIonut 试图 - 正确地 - 解释的是，您必须传入一个包含您在模板中引用的属性的对象。

如果您的歌曲集没有属性也称为 songs 供模板使用，它将失败并出现此未定义的 ReferenceError。

您的模板调用应如下所示：

var html=temp({
    "songs": songs
});

Backbone 模板上的变量传递

Variable passing on Backbone template

backbone.js

underscore.js