淘汰具有相同名称变量的多个视图模型冲突？答案

【问题标题】：Knockout multiple viewmodels with same name variables conflict?淘汰具有相同名称变量的多个视图模型冲突？
【发布时间】：2014-07-03 13:58:58
【问题描述】：

我将多个 ko 视图模型绑定到同一页面中的不同面板，但是当视图模型具有相同名称的属性时，它们似乎失去了与自己的视图模型的绑定，例如：

var Panel1ViewModel = function Panel1ViewModel() {
    var self = this;

    self.isVisible = ko.observable(false);

    self.change1 = function() {
        self.isVisible(!self.isVisible());
    };
};
ko.applyBindings(Panel1ViewModel(), document.getElementById('panel1'));

var Panel2ViewModel = function Panel1ViewModel() {
    var self = this;

    self.isVisible = ko.observable(false);

    self.change2 = function() {
        self.isVisible(!self.isVisible());
    };
};
ko.applyBindings(Panel2ViewModel(), document.getElementById('panel2'));

为了更清楚，我在jsfiddle 中重新创建了问题。

我知道我可以用 with 嵌套 ViewModel，但是页面很大，并且某些内容是动态加载的，所以我想将其分开。

有人能解释一下为什么会这样吗？有一个可能的解决方案吗？

【问题讨论】：

标签： javascript jquery web knockout.js viewmodel

【解决方案1】：

您没有正确启动视图模型。试试这样：

var Panel1ViewModel = function Panel1ViewModel() {
    var self = this;

    self.isVisible = ko.observable(false);

    self.change1 = function() {
        self.isVisible(!self.isVisible());
    };
};
ko.applyBindings(new Panel1ViewModel(), document.getElementById('panel1'));

var Panel2ViewModel = function Panel1ViewModel() {
    var self = this;

    self.isVisible = ko.observable(false);

    self.change2 = function() {
        self.isVisible(!self.isVisible());
    };
};
ko.applyBindings(new Panel2ViewModel(), document.getElementById('panel2'));

http://jsfiddle.net/XWD96/3/

不同之处在于new 运算符将创建一个新对象（this 在您的视图模型中）。因此，如果没有new，this 将在两个视图模型中指向window，从而导致冲突。

您可以在此处阅读有关构造函数 (new) 的更多信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_a_constructor_function)

【讨论】：

非常感谢，我在这个问题上胡思乱想了一会儿，忽略了那个。