Knockout绑定2链接到不同的意见和swich modelview

Question

我是新来淘汰赛，并希望有2个模型的网页上的2个链接。我希望链接上的点击事件切换显示哪个视图模型。我已经尝试了几种方法，并且有一个快捷方式https://jsfiddle.net/edgrttj3/7/但我无法使其工作。任何想法，我可能做错了什么？

<div id="content"> 

    <a id="button1" href="#" >View 1</a>&nbsp; 
    <a id="button2" href="#" >View 2</a>&nbsp; 
    <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); 

Answer 1

其实你的实现是几乎没有。只需调整一下你需要做的一些事情。

• 来自ViewModel的selectedView是一个可观察对象。可观察对象基本上是一个函数。为了修改该对象的值，您需要将新值作为参数selectedView(valueIsHere)。
• 来自ViewModel的视图是一个可观察的数组对象。同样类似上面，作为一个观察的对象是一个函数来获取它的价值，你需要调用它像一个功能的具体指标第一，随后其指数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>&nbsp; 
<a id="button2" href="#" data-bind="click: select(2)">View 2</a>&nbsp;