Question

我有一个包含选项卡的UI，每个选项卡都会从jquery ajax调用中填充其标题。我有一个文本框（以及一些其他控件，包括下拉列表），用户填写或选择一个项目。我需要为每个选项卡维护状态，以便在用户选择选项卡时，控件值会同时更新。所以这实际上是一个数组，每个选项卡都有一个数组项。

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

我的问题是淘汰赛是否适合这个？如果是这样，这是如何实现的。我之前使用过knockout.js，但是用于更多琐碎的事情。

Answer 1

Knockout有一个很好的功能叫做计算函数here，实际上它是一个依赖于模型中其他observable的函数，并且只要这些依赖项发生任何变化就会自动更新。所以在你的情况下，每当你改变状态observable，因为你已经在计算函数中使用它，你的计算函数会自动被触发，然后根据你的状态或任何其他可观察的你使用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);

使用数组模型

1 个答案: