Knockout更新表格中的单元格值

时间:2013-10-01 20:54:11

标签: arrays binding knockout.js

当我更改B列中的选择时,A列中的文本也应该更改,但不会更改。 为什么呢?

HTML:

    <table>
    <thead>
        <tr>
            <th style="width: 100px;">A</th>
            <th style="width: 100px;">B</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Data">
        <tr>
            <td><span data-bind="text: idOpt"></span></td>
            <td><select data-bind="options: $root.MyOptions, optionsText: 'name', optionsValue: 'id', value: idOpt"></select></td>
        </tr>
    </tbody>
</table>

JS:

function AppViewModel() {
   var self = this;
   self.MyOptions = ko.observableArray([
       {id: 'a1', name: 'One'},
       {id: 'a2', name: 'Two'},
       {id: 'a3', name: 'Three'}
   ]);

   self.Data = ko.observableArray([
       {idOpt: 'a1'},
       {idOpt: 'a2'},
       {idOpt: 'a1'}
   ]);
}

var vm = new AppViewModel();
ko.applyBindings(vm);

http://jsfiddle.net/bnowicki/CrVBr/2/

请帮忙。

1 个答案:

答案 0 :(得分:2)

如果您希望它们绑定/更新,则必须将数据数组中的项声明为observable。

function AppViewModel() {
   var self = this;
   self.MyOptions = ko.observableArray([
       {id: 'a1', name: 'One'},
       {id: 'a2', name: 'Two'},
       {id: 'a3', name: 'Three'}
   ]);

   self.Data = ko.observableArray([
       {idOpt: ko.observable('a1')},
       {idOpt: ko.observable('a2')},
       {idOpt: ko.observable('a1')}
   ]);
}

var vm = new AppViewModel();
ko.applyBindings(vm);

Knockout文档显示了使用普通模型和具有可观察量的模型http://knockoutjs.com/documentation/observables.html

之间的区别