我是 Knockout 的新手,希望在包含 2 个模型的页面上有 2 个链接。我想要显示 View 模型的链接开关上的单击事件。我尝试了几种方法并得到了一个 jfiddle https://jsfiddle.net/edgrttj3/7/但我无法让它工作。知道我可能做错了什么吗?
<div id="content">
<a id="button1" href="#" >View 1</a>
<a id="button2" href="#" >View 2</a>
<hr />
<div data-bind="with: selectedView">
<div data-bind="template: { name: templateName, data: data }"></div>
</div>
<script id="oneTmpl" type="text/html">
<ul data-bind="foreach: items">
<li>
<span data-bind="text: id"></span>
<input data-bind="value: name" />
</li>
</ul>
</script>
<script id="twoTmpl" type="text/html">
First:
<input data-bind="value: firstName" />
Last:
<input data-bind="value: lastName" />
</script>
</div>
这是javascript:
var View = function (title, templateName, data) {
this.title = title;
this.templateName = templateName;
this.data = data;
};
var subModelA = {
items: ko.observableArray([
{ id: 1, name: "one" },
{ id: 2, name: "two" },
{ id: 3, name: "three" }
])
};
var subModelB = {
firstName: ko.observable("Bob"),
lastName: ko.observable("Smith")
};
var viewModel = {
views: ko.observableArray([
new View("one", "oneTmpl", subModelA),
new View("two", "twoTmpl", subModelB)
]),
selectedView: ko.observable()
};
function setSelectedView(newview) {
alert(newview);
if (newview == "oneTmpl") {
viewModel.selectedView = viewModel.views[0];
} else {
viewModel.selectedView = viewModel.views[1];
}
};
ko.applyBindings(viewModel);
document.getElementById ("button1").addEventListener("click", setSelectedView('oneTmpl'), false);
document.getElementById ("button1").addEventListener("click", setSelectedView('twoTmpl'), false);
最佳答案
实际上,您的实现就快完成了。您只需要做一些调整。
- ViewModel 中的 selectedView 是一个可观察对象。可观察对象基本上是一个函数。为了修改该对象的值,您需要将新值作为参数传递
selectedView(valueIsHere)
。 - 来自 ViewModel 的 View 是一个可观察的数组对象。和上面一样,因为一个可观察对象是一个函数来获取特定索引的值,你需要像函数一样调用它,首先是它的索引
views()[0]
所以这是更新后的样子:
var View = function (title, templateName, data) {
this.title = title;
this.templateName = templateName;
this.data = data;
};
var subModelA = {
items: ko.observableArray([
{ id: 1, name: "one" },
{ id: 2, name: "two" },
{ id: 3, name: "three" }
])
};
var subModelB = {
firstName: ko.observable("Bob"),
lastName: ko.observable("Smith")
};
var ViewModel = function (){
this.views = ko.observableArray([
new View("one", "oneTmpl", subModelA),
new View("two", "twoTmpl", subModelB)
]);
this.selectedView = ko.observable();
this.select = function(id){
if (id === 1) {
this.selectedView(this.views()[0]);
} else {
this.selectedView(this.views()[1]);
}
};
};
ko.applyBindings(new ViewModel());
下面是对按钮的一些更改:
<a id="button1" href="#" data-bind="click: select(1)">View 1</a>
<a id="button2" href="#" data-bind="click: select(2)">View 2</a>
关于javascript - Knockout 将 2 个链接绑定(bind)到不同的 View 并切换模型 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42847166/