0

这些函数 ( * ) 和 ( ** ) 在 aBackbone.View中，但我认为不需要 Backbone 的知识来解决这个问题。

正如您从我在代码中的注释中看到的那样：
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

看起来backbone.js 有第三个参数用于上下文

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 回答
1

问题是您分配了两次相同的变量。在getAvatar()中，您将首先设置this.userModel为 id == 1 的 UserModel。然后在下一次循环迭代中，将为其分配 id == 2 的 UserModel。

当该setAvatar()函数被点击时，它会查看this.userModel并且只看到您设置的一个值。您应该尽量不要使用实例变量来存储模型。

这是修复它的一种方法。可能有更简单的方法来修复它，但很难从给出的代码示例中分辨出来。我还添加了一些关于代码中一些奇怪之处的评论。

( * )

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 回答