在與陣列模型

Question

knockout.js維修器材UI狀態我有一個包含選項卡的用戶界面，並且每個標籤獲取其從字幕一個jquery AJAX調用填充。我有一個用戶填寫或選擇的項目的文本框（和其他一些控制，包括一個下拉列表）。我需要維護每個選項卡的狀態，以便當用戶選擇一個選項卡時，控制值會同時更新。所以這實際上是一個數組，每個選項卡都有一個數組項。

在文本框的情況下，數據僅僅是用戶輸入的文本。在下拉的情況下，它是列表中的選定項目。下拉數據對於每個標籤都是相同的。該選項卡控制確實是一個標籤條因此對於所有選項卡，一個文本框和一個下拉菜單等

我的問題是淘汰賽是否爲此合適的工具？如果是這樣，這是如何完成的。我之前使用過knockout.js，但是用於更瑣碎的事情。

Answer 1

Knockout有一個很好的功能被稱爲計算函數here，它實際上是一個依賴於模型中其他可觀察對象的函數，並且只要這些依賴關係發生任何變化就會自動更新。所以你的情況，只要更改狀態觀察到的，因爲你已經在使用它計算函數裏面，你的計算功能將自動觸發，然後根據您所在州或任何其他可觀察您發送使用Ajax和成功更新的請求您模型。

下面是如何處理一個簡單的例子：

例子：https://jsfiddle.net/kyr6w2x3/156/

HTML：

<select data-bind="value:State"> 
    <option value="1"> state 1</option> 
    <option value="2"> state 2</option> 
    <option value="3"> state 3</option> 
</select> 
<ul data-bind="foreach:MyArray"> 
    <li> 
    <span data-bind="text:Name"></span> 
    </li> 
</ul> 

VM：

var data1 = [{ Id: 1, Name: "Name 1" },{ Id: 2, Name: "Name 2" },{ Id: 3, Name: "Name 3" } ]; 
var data2 = [{ Id: 10, Name: "Name 10" },{ Id: 20, Name: "Name 20" },{ Id: 30, Name: "Name 30" } ]; 
var data3 = [{ Id: 100, Name: "Name 100" },{ Id: 200, Name: "Name 200" },{ Id: 300, Name: "Name 300" } ]; 
var data = []; 

function MainViewModel(){ 
    var self = this; 
    self.MyArray = ko.observableArray([]); 
    self.State = ko.observable(1) 

    self.LoadTab = ko.computed(function() { 
     switch(self.State()){ 
     case "1": 
      data = data1; 
      break; 
     case "2": 
      data = data2; 
      break; 
     case "3": 
      data = data3; 
      break; 
     } 
     //Call your ajax based on state here and update your array in ajax's success. 
     self.MyArray($.map(data, function (item) { 
      return new ItemViewModel(item); 
     })); 

    }, self); 

} 

function ItemViewModel (data){ 
    var self = this; 
    self.Id = ko.observable(data.Id); 
    self.Name = ko.observable(data.Name); 
} 

var viewModel = new MainViewModel(); 
ko.applyBindings(viewModel);