Javascript Can'；t一致地访问视图中的主干视图

我正在尝试为主干项目创建主视图/控制器，但在正确访问视图中的视图时遇到问题。代码如下：

var Controller = Backbone.View.extend({
    initialize: function() {
        this.characterView = new CharacterView({model: character});
        this.encounterView = new EncounterView({collection: encounter});
        this.characterView.$el.on('click', '.attack', this.charAttack);
    },
    charAttack: function() {
        console.log(this.characterView);
    },
    render: function() {
        this.encounterView.render();
        this.characterView.render();
        console.log(this.characterView.model.toJSON());
    }
});

var controller = new Controller();
controller.render();

charAttack中的

this.characterView

未定义，而在render函数中，它使用了正确的对象。我不确定为什么render可以访问这个.characterView，但charAttack不能。如果您有任何帮助了解这一点，我们将不胜感激。

请在初始化函数中添加：

initialize: function() {
    _.bindAll(this); // assuming Underscore < 1.5.0
    this.characterView = new CharacterView({model: character});
    this.encounterView = new EncounterView({collection: encounter});
    this.characterView.$el.on('click', '.attack', this.charAttack);
},

---

然后在控制台中键入此项，查看它是否绑定到

窗口

或其他变量。

除非已实例化对象，否则无法访问

此

元素

var ModController = function(){
    var characterView;
    var encounterView;

    var Controller = Backbone.View.extend({
        initialize: function() {
            characterView = new CharacterView({model: character});
            encounterView = new EncounterView({collection: encounter});
            this.characterView.$el.on('click', '.attack', this.charAttack);
        },
        charAttack: function() {
            console.log(characterView);
        },
        render: function() {
            encounterView.render();
            characterView.render();
            console.log(this.characterView.model.toJSON());
        } 
    });

    return new Controller();

}

var myController = new ModController(); 
myController.render();

---

所以我相信这可以解决您的问题。

有几点需要注意：

1您正在使用jQuery绑定DOM事件，实际上 提供了一种更优雅、更有用的机制来实现同样的效果 目标。看一看

您正在从事件内部调用controller.charAttack 处理程序。执行此操作时，将在

controller.charAttack

很可能不会指向“controller” 它将指向“窗口”

有很多方法可以解决这个问题。因为您正在响应单击事件，所以可以改为使用主干的events属性绑定事件处理程序。删除行

this.characterView.$el…

并添加此新属性（通常在

初始化

声明之前）：

events: {
  'click .attack' : 'charAttack'
}, 

---

不带方法名的

.bindAll

不受欢迎，因为下划线1.5.0

.bindAll（这个“charAttack”）；

几乎可以用于所有版本的下划线，但每个版本都有自己的下划线。

.bindAll（这个“charAttack”）；

做到了这一点。而且完全正确，因为缺少方法名。

this.characterView.$el.on（'click'，'attack'，this.charAttack）；

在主干应用程序中是一件奇怪的事情。这通常会通过

characterView

的

事件
映射来处理，而实际的攻击逻辑可能是角色模型上的一种方法，它会广播任何状态变化（例如因失去太多HP而死亡）通过事件。如果我有一个角色视图和一个遭遇视图（与怪物），我如何从characterView中访问encounterView集合中的模型？例如，角色单击攻击，提示charAttack显示怪物按钮，单击按钮，charAttack使用该模型及其自己的模型来处理战斗逻辑。下面是报告，如果有帮助的话：实际上，“攻击”不是吗按钮是遭遇战视图的一部分吗？大概遭遇战视图会知道谁参与了遭遇战。也许吧，但我正在尝试保留characterView上的动作按钮（在遭遇战视图之外），以便在我有更多动作（使用物品、施法等）在轮到您时，这些操作将决定哪些视图/模型/集合受到影响。因此，我创建了控制器/主视图，以便可以访问其中的两个视图。当然全局变量不是一个好主意，您需要组合例如一个显示模式来限制此变量的范围。感谢shari我尝试添加上面的代码，js控制台记录到charAttack没有定义。我的错误，抱歉。我忘了在“charAttack”周围添加引号。我看到你选择了一个可行的答案。很高兴听到你克服了困难。对于其他来问这个问题的人，
事件：{}
hash作为视图的属性是设置DOM事件响应的标准方法。它是一种很好的声明性语法，后台主干将为您设置事件绑定。
events: {
  'click .attack' : 'charAttack'
},