javascript - 使用数组模型维护 knockout.js 中的 UI 状态

Question

我有一个包含选项卡的 UI，每个选项卡的标题都是通过 jquery ajax 调用填充的。我有一个文本框(以及一些其他控件，包括下拉列表)，用户可以填写或选择一个项目。我需要维护每个选项卡的状态，以便当用户选择选项卡时，控件值会同时更新。因此，这本质上是一个数组，每个选项卡都有一个数组项。

对于文本框，数据只是用户输入的文本。对于下拉列表，它是列表中选定的项目。每个选项卡的下拉数据都是相同的。选项卡控件实际上是一个选项卡条，因此所有选项卡都有一个文本框和一个下拉列表等。

我的问题是 knockout 是否是正确的工具？如果是这样，这是如何实现的？我以前使用过 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>

虚拟机:

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);