Javascript 删除具有相同名称变量的多个ViewModel冲突？

我将多个ko viewModel绑定到同一页面中的不同面板，但当viewModel具有同名属性时，它们似乎会丢失对自己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'));

为了更清楚，我在中重新创建了这个问题

我知道我可以嵌套ViewModels，但是页面很大，一些内容是动态加载的，所以我想将其分离

---

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

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

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'));

不同之处在于

new

操作符将创建一个新对象（

this

在视图模型中）。因此，如果没有

新的

，

此

将指向两个视图模型中的

窗口

，从而导致冲突

您可以在此处阅读有关构造函数（

new

）的更多信息：

---

)

非常感谢，我在这上面忙了一会儿，却忽略了这一点。