javascript - knockout 具有相同名称变量冲突的多个 View 模型？

Question

我将多个 ko viewmodels 绑定(bind)到同一页面中的不同面板，但是当 viewmodels 具有具有相同名称的属性时，它们似乎失去了与自己 viewModel 的绑定(bind)，例如:

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 中重现了这个问题.

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

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

Answer 1

您没有正确启动 View 模型。像这样尝试:

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 在您的 View 模型中)。因此，如果没有 new，this 将指向两个 View 模型中的 window，从而导致冲突。

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