我将多个 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 嵌套,但是页面很大并且一些内容是动态加载的,所以我想将它们分开。
有人能解释一下为什么会这样吗?有什么可能的解决方案吗?
最佳答案
您没有正确启动 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'));
区别在于 new
运算符将创建一个新对象(this
在您的 View 模型中)。因此,如果没有 new
,this
将指向两个 View 模型中的 window
,从而导致冲突。
您可以在此处阅读有关构造函数(新
)的更多信息:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_a_constructor_function )
关于javascript - knockout 具有相同名称变量冲突的多个 View 模型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23672849/