0

これらの関数 ( * ) と ( ** ) は 内にありBackbone.Viewますが、この問題を解決するためにバックボーンの知識は必要ないと思います。

コード内の私のコメントからわかるように、次の場合:
1)getAvatar関数を呼び出すと、すべて
問題ありません。2) getAvatar を呼び出すと、setAvatar何かが壊れています。

次の問題をどのように修正すればよいですか?

( * )

    getAvatar: function ()
    {
        var creatorIds = this.getCreatorIds();
        console.log(creatorIds); // [1,2]  ******  here is ok *******

        for (var c = 0, l = creatorIds.length; c < l; c += 1) {
            if (typeof this.avatars[creatorIds[c]] === 'undefined') {
                this.userModel = new UserModel({id: creatorIds[c]});
                this.userModel.fetch();
                this.userModel.on('change', this.setAvatar, this);      
            }
        }
    },

( ** )

    setAvatar: function ()
    {       
        console.log(this.userModel.get('id')); // 2, 2  *********  it should be 1, 2  *******
        this.names[this.userModel.get('id')] = this.userModel.get('name');
        this.avatars[this.userModel.get('id')] = typeof this.userModel.get('avatar');
        this.render();
    },

( * )

initialize: function ()
{
     _.bindAll(this, 'getAvatar', 'setAvatar');
}
4

2 に答える 2

1

問題は、同じ変数を2回割り当てていることです。ではgetAvatar()、最初にid == 1のUserModelに設定this.userModelします。次に、次のループ反復で、id==2のUserModelが割り当てられます。

setAvatar()関数がヒットすると、設定した1つの値のみが表示さthis.userModelれます。モデルを格納するためにインスタンス変数を使用しないようにする必要があります。

これを修正する1つの方法があります。おそらくもっと簡単な修正方法がありますが、与えられたコードサンプルから見分けるのは難しいです。また、コードのいくつかの奇妙な点についていくつかコメントを追加しました。

（*）

getAvatar: function ()
{
    var creatorIds = this.getCreatorIds();
    console.log(creatorIds); // [1,2]  ******  here is ok *******

    var self = this;

    for (var c = 0, l = creatorIds.length; c < l; c += 1) {
        if (typeof this.avatars[creatorIds[c]] === 'undefined') {
            var user = new UserModel({id: creatorIds[c]});

            //probably better to bind the handler first, in case fetch() completes synchronously from cache
            user.on('change', function(){
                console.log(user.get('id'));
                self.names[user.get('id')] = user.get('name');
                self.avatars[user.get('id')] = typeof user.get('avatar'); //are you sure you want typeof here?
                self.render(); //Note, this will get called a lot. Are you sure you want to do this?
            });   

            user.fetch();   
        }
    }
}
于 2012-05-24T20:35:55.010 に答える
1

backbone.js にはonのコンテキストの 3 番目のパラメーターがあるようです

object.on(event, callback, [context])

あなたのコードは

getAvatar: function ()
{
    var creatorIds = this.getCreatorIds();
    console.log(creatorIds); // [1,2]  ******  here is ok *******

    for (var c = 0, l = creatorIds.length; c < l; c += 1) {
        if (typeof this.avatars[creatorIds[c]] === 'undefined') {
            this.userModel = new UserModel({id: creatorIds[c]});
            this.userModel.fetch();
            this.userModel.on('change', this.setAvatar, this );  //added this after the function.
        }
    }
},

または、クロージャーを使用できます

getAvatar: function ()
{
    var that = this;  //variable to maintain scope
    var creatorIds = this.getCreatorIds();
    console.log(creatorIds); // [1,2]  ******  here is ok *******

    for (var c = 0, l = creatorIds.length; c < l; c += 1) {
        if (typeof this.avatars[creatorIds[c]] === 'undefined') {
            this.userModel = new UserModel({id: creatorIds[c]});
            this.userModel.fetch();
            this.userModel.on('change', function(){ that.setAvatar(); } );  //use a closure here with that variable that which is defined above.    
        }
    }
},
于 2012-05-24T18:16:17.593 に答える