主干.js视图变量被覆盖

Backbone.js view variables being overwritten

本文关键字：覆盖 变量 视图 js 主干      更新时间：2023-09-26

我通过$.each创建视图，所有视图的myId属性总是最终被最后一个元素的myId覆盖。

视图的创建

 $('.form').each(function() {
        // split class name
        var classNameArray = $(this).attr('class').split('-');
        // get typeId from last part of classname
        var myId = classNameArray[classNameArray.length-1];
        new myView({ 'el': $('.form-' + myId), 'myId': myId });      
    });

初始化我的视图

var myView = Backbone.View.extend({
events: {
},
initialize: function() {
    var myId = this.options.myId;
},
test: function() {
    console.log(myId); // will return myId of last view created
}
});

如何获取视图以保留其唯一的 myId？

当你这样写的时候——

initialize: function() {
    var myId = this.options.myId;
},

它创建一个初始化函数的本地变量（这是一个Javascript的东西，而不是一个Backbone的东西）。

请尝试此操作（创建视图对象的局部变量）：

initialize: function() {
    this.myId = this.options.myId;
},

test: function() {
  console.log(myId); // will return myId of last view created
}

这个 [myId] 不是 中的 [myId]：

initialize: function() {
    var myId = this.options.myId;    
}

它是来自 [myId] 的：

$('.form').each(function() {
        // split class name
        var classNameArray = $(this).attr('class').split('-');
        // get typeId from last part of classname
        var myId = classNameArray[classNameArray.length-1]; //from this myId!!!
        new myView({ 'el': $('.form-' + myId), 'myId': myId });      
 });

因为：

第一：

"var myId = this.options.myId; "

这个 [myId] 是局部变量内的初始化，不能在方法之外访问这个变量。

第二：

console.log(myId); // will return myId of last view created

为什么我们在这里能够访问[myId]？因为这个[myId]是[this.myId]，[this]是调用方法的上下文： 

new myView({ 'el': $('.form-' + myId), 'myId': myId });

所以，这个 [myId] 是 ：

var myId = classNameArray[classNameArray.length-1];

[myId] 是循环变化，所以你总是得到最后一个循环的 [myId] 的值。

溶液：

initialize: function() {
    this.myId = this.options.myId;
},

因为 [this.myId] 是 [myView] 的内部变量，所以每次创建 [myView] 的实例时，在 [initialize] 方法中，[this.myId] 都会动态地设置为 [this.options.myId] 的正确值形式。

那种问题，可以参考这篇文章：

http://dmitrysoshnikov.com/ecmascript/chapter-4-scope-chain

相关文章：