在html表的foreach绑定中,是否可以使用knockout数据绑定到选择下拉列表?

时间:2015-10-01 16:10:09

标签: javascript jquery html knockout.js

我试图在表格上显示具有相同值和功能的相同select。我使用foreach绑定绑定到我的表对象。这是我的代码:

<table class="table table-bordered" >
    <thead>
        <tr>
            <th>Nextable Name</th>
            <th>POS Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: tables">
        <tr>
            <td data-bind="text: name"></td>
            <td><select  class="select2 span8 dropdown"  data-placeholder="Select Pos Table" data-bind="options: $parent.omnivoreTables, optionsText: 'name', optionsValue:'id', value: $parent.selectedOmnivoreTableId"></select></td>
        </tr>
    </tbody>
</table>

出于某种原因,下拉列表都表示未定义且根本无法选择。我检查页面和下拉元素,它们都有正确的选项和值,就好像这样有效,但它没有。任何帮助非常感谢!

1 个答案:

答案 0 :(得分:0)

这是你想要的吗?

&#13;
&#13;
var vm = {
  omnivoreTables: [
    {name: 'One',
     id: '1'},
    {name: 'Two',
     id: '2'}
    ],
  selectedOmnivoreTableId: ko.observable(1),
  tables: ko.observableArray([
    {name: 'First'},
    {name: 'Second'},
    {name: 'Third'}
  ])
};

ko.applyBindings(vm);
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Nextable Name</th>
      <th>POS Name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: tables">
    <tr>
      <td data-bind="text: name"></td>
      <td>
        <select class="span8 dropdown" data-placeholder="Select Pos Table" data-bind="options: $parent.omnivoreTables, optionsText: 'name', optionsValue:'id', value: $parent.selectedOmnivoreTableId"></select>
      </td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;