Question

背景

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？

Answer 1

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

因此，Trevor希望让他的HTML看起来像：

<p>r1c3:    <input data-bind="value: $data.r1c3, valueUpdate:'afterkeydown'" /></p>

knockoutjs：如何从丢失的ko.observable（）或ko.computed（）中恢复或捕获

1 个答案: