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 コンテンツを返す関数。

したがって、jQuery は、this.template理解できない引数を使用して関数を呼び出しています。次に、コンパイルされたテンプレート関数がdefaultImgどこかを探しに行き、それが見つからず、 がないため を取得しReferenceErrorます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 に答える