Question

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

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中重新创建了问题。

我知道我可以使用与嵌套ViewModels，但页面很大，而且有些内容是动态加载的，所以我想将它分开。

有人可以解释一下为什么会发生这种情况并找出可能的解决方案吗？

Answer 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）

敲除多个具有相同名称变量的视图模型冲突？

1 个答案: