3

背景

Trevor 有一个简单的 knockoutjs 页面，其中包含三个声明的 ko.observable() 和一个声明的 ko.computed()

问题

Trevor 想删除第三个声明的项目。问题是，当 Trevor 删除它时，所有后续声明的项目的渲染也会失败。

例子

考虑以下代码片段：

<p>r1c1:    <input data-bind="value: r1c1, valueUpdate:'afterkeydown'" /></p>
<p>r1c2:    <input data-bind="value: r1c2, valueUpdate:'afterkeydown'" /></p>
<p>r1c3:    <input data-bind="value: r1c3, valueUpdate:'afterkeydown'" /></p>
<p>r1c4:    <input data-bind="value: r1c4, valueUpdate:'afterkeydown'" /></p>

<script type="text/javascript">
  var ViewModel = function(){
    var self    =   this;

    self.r1c1 = ko.observable('alpha');
    self.r1c2 = ko.observable('bravo');
    self.r1c4 = ko.observable('delta');

    // if Trevor comments out this line, it caues r1c4 to stop rendering
    // this is expected, but is there a workaround that does not require to
    // remove the data-binding to value r1c3 from the HTML body ?
    self.r1c3 = ko.computed(function(){return [self.r1c1(),self.r1c2()].join(':')});
  }

  ko.applyBindings(new ViewModel());
</script>

问题

有没有办法让 Trevor 可以注释掉 r1c3 的 ko.computed() 声明，并且仍然在页面正文中保留与 r1c3 的数据绑定；没有它破坏随后与 r1c4 的数据绑定？

4

1 回答 1

3

Trevor 可以使用的一个技巧是引用绑定中的变量，$data.r1c3而不仅仅是r1c3. 引用对象的未定义属性不会像引用未定义变量那样导致错误。

所以，Trevor 想让他的 HTML 看起来像：

<p>r1c3:    <input data-bind="value: $data.r1c3, valueUpdate:'afterkeydown'" /></p>
于 2012-11-05T18:25:58.900 回答