javascript - Knockout - 如何一起使用 option 和 foreach 绑定(bind)

Question

我有一个来自服务器的ajax数据，我应该用这个数据生成选择框。请看this code :

var dataCameFromServer = {
  foo: "1",
  bar: "sag",
  results: [
    {
      slectedBoxID: null,
      selectBoxOptions: [
        {
          id: 1,
          name: "mosi"
        },
        {
          id: 2,
          name: "azi"
        },
        {
          id: 3,
          name: "mom"
        },
        {
          id: 4,
          name: "dad"
        }
      ]
    },
    {
      slectedBoxID: 2,
      selectBoxOptions: [
        {
          id: 1,
          name: "tehran"
        },
        {
          id: 2,
          name: "masal"
        },
        {
          id: 3,
          name: "gilan"
        },
        {
          id: 4,
          name: "rasht"
        }
      ]
    },
    {
      slectedBoxID: 1,
      selectBoxOptions: [
        {
          id: 1,
          name: "adidas"
        },
        {
          id: 2,
          name: "nike"
        },
        {
          id: 3,
          name: "rebook"
        },
        {
          id: 4,
          name: "puma"
        }
      ]
    }
  ]
};

function selectViewModel() {
  var self = this;
  this.data = ko.observable(dataCameFromServer);
  this.sbValue = ko.observableArray();
  ko.computed(function() {
    $.each(self.data().results, function(i,v) {
      self.sbValue.push(v.slectedBoxID);
    });
  });
  ko.computed(function(){
  console.log(self.sbValue());
});
}


ko.applyBindings(new selectViewModel(), $("#wrapper")[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapepr">
  <!-- ko with: data -->
  <!-- ko foreach : results -->
  <select data-bind="options:selectBoxOptions,optionsText: 'name',optionsValue: 'id',value: $root.sbValue()[$index],optionsCaption: 'Choose...'"></select>
  <!-- /ko -->
  <!-- /ko -->
</div>

我希望默认情况下由 slectedBoxID 中的选项选择我的选择框，如果我的选择框发生更改，则相应 slectedBoxID 的值也会更改。

有什么建议吗？

p.s:我不知道服务器端有多少结果，不只是这三个结果!

Answer 1

最简单的方法是使用 ko.mapping插件

或者您可以手动使每个数组对象属性可观察。

var dataCameFromServer = { foo: "1", bar: "sag", results: [{ slectedBoxID: null, selectBoxOptions: [{ id: 1, name: "mosi" }, { id: 2, name: "azi" }, { id: 3, name: "mom" }, { id: 4, name: "dad" } ] }, { slectedBoxID: 2, selectBoxOptions: [{ id: 1, name: "tehran" }, { id: 2, name: "masal" }, { id: 3, name: "gilan" }, { id: 4, name: "rasht" } ] }, { slectedBoxID: 1, selectBoxOptions: [{ id: 1, name: "adidas" }, { id: 2, name: "nike" }, { id: 3, name: "rebook" }, { id: 4, name: "puma" } ] } ] };

function selectViewModel() {
  var self = this;
  // using ko.mapping 
  this.data = ko.mapping.fromJS(dataCameFromServer);
  this.sbValue = self.data.results().map(v => v.slectedBoxID);
}

ko.applyBindings(new selectViewModel(), $("#wrapper")[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div id="wrapepr">
  <!-- ko with: data -->
  <!-- ko foreach: results -->
  <select data-bind="options:selectBoxOptions,optionsText: 'name',optionsValue: 'id',value: slectedBoxID,optionsCaption: 'Choose...'"></select>
  <!-- /ko -->
  <!-- /ko -->
</div>
<pre data-bind="text: ko.toJSON(sbValue, null, 2)"></pre>