3

バックグラウンド

Trevor には、ko.observable() が 3 つ宣言され、ko.computed() が 1 つ宣言された単純なノックアウト js ページがあります。

問題

Trevor は、3 番目に宣言された項目を削除したいと考えています。問題は、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 が使用できるトリックの 1 つは、バインド内の変数を$data.r1c3単なる ではなくとして参照することですr1c3。オブジェクトの未定義のプロパティを参照しても、未定義の変数を参照してもエラーは発生しません。

したがって、Trevor は自分の HTML を次のようにしたいと考えています。

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