用可剔除的可观测数组同步jquery选择菜单

Question

也许这样做是错误的，但是我有一个html表，它使用一个使用foreach的可剔除的可观测数组填充。每一行我都有一个下垂。我喜欢jquery选择菜单，所以我使用它。不幸的是，当您运行小提琴时，您会注意到在更新下拉列表时，没有更新相应的敲除选定值。

这是小提琴，https://jsfiddle.net/8rw4ruze/3/，这是html。

<table class="table  table-condensed table-responsive">
  <thead>
    <th>id</th>
    <th>animal</th>
    <th>Selected Value</th>
  </thead>
  <tbody data-bind="foreach: tableRows">
    <tr>
      <td data-bind="text: id"></td>
      <td>
        <select class="form-control" data-bind="options: recordList,
                     optionsText: 'desc',
                     optionsValue: 'val',
                     value: selectedVal,
                     attr: {id:  selectId}">

        </select>
      </td>
      <td data-bind="text: selectedVal"></td>
    </tr>
  </tbody>
</table>

这是javascript

function record(val, desc) {
  var self = this;
  this.val = ko.observable(val);
  this.desc = ko.observable(desc);
}

function tableRow(id, recordList) {
  var self = this;
  this.id = ko.observable(id);
  this.recordList = ko.observable(recordList)
  this.selectedVal = ko.observable('A');
  this.selectId = ko.computed(function() {
    return 'mySelect' + self.id()
  }, this);
}

function Model() {
  var self = this;
  this.records = ko.observableArray("");
  this.tableRows = ko.observableArray("");
}

var mymodel = new Model();

$(function() {

  mymodel.records.push(new record('A', 'ant'));
  mymodel.records.push(new record('B', 'bird'));
  mymodel.records.push(new record('C', 'cat'));
  mymodel.records.push(new record('D', 'dog'));
  mymodel.tableRows.push(new tableRow(1, mymodel.records()));
  mymodel.tableRows.push(new tableRow(2, mymodel.records()));
  mymodel.tableRows.push(new tableRow(3, mymodel.records()));
  mymodel.tableRows.push(new tableRow(4, mymodel.records()));


  ko.applyBindings(mymodel);

    for (var i = 0; i < 4; i++) {
    var id = '#mySelect' + (i + 1)
    $(id).selectmenu({
      width: 125,
      change: function(event, ui) {
        var newVal = $(this).val();
        mymodel.tableRows()[i].selectedVal(newVal);
      }
    });
  }


});

谢谢，我带了一个数据属性。我更喜欢使用自定义绑定，但我还不够聪明，无法解决这个问题，所以我就这样做了。

for (var i = 0; i < 4; i++) {
    var id = '#mySelect' + (i + 1)
    $(id).selectmenu({
      width: 125,
      change: function(event, ui) {
        var newVal = $(this).val();
        var index = $(this).data( "index" );
        mymodel.tableRows()[index].selectedVal(newVal);
      }
    }).data( "index", i );
  }

这是小提琴https://jsfiddle.net/8rw4ruze/7/

我想我让它在这里使用自定义绑定--它是https://jsfiddle.net/8rw4ruze/8/

Answer 1

Matt.k是正确的，当它被使用时，你的I的价值不是你想要的那样。一种方法是使用这个循环，而不是简单的for。

$('select').each(function (i, e) {
  e.selectmenu({
    width: 125,
    change: function(event, ui) {
      var newVal = $(this).val();
      mymodel.tableRows()[i].selectedVal(newVal);
    }
  });
});

这有点脆弱，因为它依赖于i和e来正确地对应。一种更健壮的方法(在Knockout中也是典型的)是使用绑定处理程序，这将允许您指定绑定并让Knockout遍历元素并进行必要的调用。令人惊讶的是，一个小小的网络搜索并没有为我打开一个。

我看到有一个github上的淘汰制-jqueryui项目，它也为您提供了一种干净的使用所需小部件的方法。