0

我正在从骨干网中的休息 url 获取模型对象的集合。然后我遍历集合并使用下划线模板帮助器方法处理来自模型的数据。但是在调用该属性时我得到了未定义的 defaultImg。

看法：

 define (['jquery','underscore','backbone'],function($,_,Backbone){
PopVideoView = Backbone.View.extend ({
    tagName:"li",
    //template: _.template($('#popView').html()),
    template: _.template("<li><img src='<%= defaultImg %>'/></li>"),
    render: function ()
    {
        console.log(this.model.toJSON());
        this.template(this.model.toJSON());
        this.$el.html(this.template);
        return this;
    }
});
return PopVideoView;
});

另一种观点：

define(['jquery','underscore','backbone','collections/PopVideos','views/PopVideo'],function($,_,Backbone){
PopVideosView = Backbone.View.extend ({
    el:"#pop",
    render: function ()
    {
        this.collection.each (function(video)
        {
            popVideoView = new PopVideoView({model:video});
            this.$el.append (popVideoView.render().el).hide().fadeIn(300);
        },this);
        return this;
    },
});
return PopVideosView;
});

这是我从 Chrome 开发者控制台得到的：

Object {video_id: "1G4isv_Fylg", video_name: "Coldplay - Paradise ", defaultImg: "http://i.ytimg.com/vi/1G4isv_Fylg/mqdefault.jpg", genre: "pop", date: "Feb 16, 2013 1:01:33 PM"…}
Uncaught ReferenceError: defaultImg is not defined

我做错了什么？

这是模型和集合：

 define (['jquery','underscore','backbone'],function($,_,Backbone){
Video = Backbone.Model.extend ({
    urlRoot:"/video",
});
return Video;
});//end define

define(['backbone','models/Video'],function(Backbone,Video) {
PopVideosCollection = Backbone.Collection.extend ({
    model:Video,
    url:"/pop/3/1"
});
return PopVideosCollection;
});
4

2 回答 2

1

我发现我只需要这样做的问题：

this.$el.html(this.template(this.model.toJSON()));

代替：

this.template(this.model.toJSON());
this.$el.html(this.template);
于 2013-03-02T03:44:59.350 回答
1

你的render方法PopVideoView有一些问题：

template: _.template("<li><img src='<%= defaultImg %>'/></li>"),
render: function ()
{
    console.log(this.model.toJSON());
    this.template(this.model.toJSON());
    this.$el.html(this.template);
    return this;
}

当您调用 时_.template，您会返回一个函数，因此：

this.template(this.model.toJSON());

除了您丢弃 HTML 返回值之外，这是有道理的。这部分：

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

是你出错的地方，你正在将一个函数传递给 jQuery 的html方法和来自精美的手册：

.html（函数（索引，旧html））

功能（索引，旧html）

返回要设置的 HTML 内容的函数。

所以 jQuerythis.template用它不理解的参数调用你的函数。然后编译的模板函数去寻找defaultImg某个地方，没有找到它，你得到 aReferenceError因为没有defaultImg.

您不想将函数传递给html()，您想评估模板函数并将其返回值传递给html()：

render: function ()
{
    this.$el.html(this.template(this.model.toJSON()));
    return this;
}

var顺便说一句，您在定义视图和模型时确实应该使用：

define (['jquery','underscore','backbone'],function($,_,Backbone){
    var PopVideoView = Backbone.View.extend ({
    ^^^

如果你不这样做，这些变量是全局的var。

于 2013-03-02T03:45:42.483 回答