knockout.js - knockoutjs : how to recover from or trap a missing ko. observable() 或 ko.computed()

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 的数据绑定(bind)？不会破坏后续到 r1c4 的数据绑定(bind)？

Answer 1

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

所以，Trevor 想让他的 HTML 看起来像这样:

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