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;