1

次の設定（多かれ少なかれ）を持つアプリケーションがあります：

JS

var ObjectVM = function(data) {
    var me = this;
    me.name = ko.observable(data.name);
    //Set other properties
    ...

    me.isSelected(false);
};
var VM = function () {
    var me = this;
    me.Records = [];
    me.Selected = ko.observable(undefined);
    me.Select = function (rec) {
        if (rec.hasChanges == undefined) {
            //attach editable functionality
            ko.editable(record);
        }
        rec.isSelected(true);
        rec.beginEdit();
        if (me.Selected() != undefined) {
            if (me.Selected().hasChanges()) {
                me.Selected().rollback();
            }
            me.Selected().isSelected(false);
            me.Selected().commit();
        }
        me.Selected(rec);
        //Do some hiding/showing of form...
    };
    me.Init = function(){
       $.ajax({...,
          success: function(data){
          for(var i = 0;i< data.length;i++){
           me.Records.push(new ObjectVM(data[i]));
          }
       }
    };
};

HTML

<div>
     RECORDS DISPLAY GRID (Pretend it's a table with 5 columns and 10 rows)
</div>
<div data-bind="with: Selected">
   <form id="editRec">
     <label>Name</label>
      <input data-bind="value: name" />
   </form>
</div>

VMSelect関数を呼び出すテーブル行にクリックバインディング設定があります。「with」バインディングを使用すると、Selected（）が未定義の場合はフォームが削除され、Selected（）にレコードがある場合は追加されます。これが発生するたびに、フォームに添付されていた検証、タブ、およびイベントバインディング（非KOバインディング）が失われるという問題。アプリケーションは完全に機能しますが、フォーム、セットアップ検証、UI構成、およびバインディングを再追加する必要があるため、レコード間で変更するとパフォーマンスが低下します。

フォームをページに残し、バインディングと設定を維持する方法はありますか、それとも、Selected値が変更されるたびにヒットを処理するように強制されますか？

4

1 に答える 1

2

現在、バインディングはその内容をテンプレートとして扱い、値が変更されるwithたびに再レンダリングします。with再レンダリングを回避する唯一の方法は、を使用しないことwithです。

<div>
   <form id="editRec">
     <label>Name</label>
      <input data-bind="value: Selected().name" />
   </form>
</div>

もちろん、場合Selectedによってundefinedはこれは機能しないため、別の解決策を探す必要があります。最良の方法は、イベントハンドラー、検証、タブなどを設定するカスタムバインディングを使用することです。

<!--ko with: Selected-->
<div data-bind="setUpStuff: true">
   <form id="editRec">
     <label>Name</label>
      <input data-bind="value: name" />
   </form>
</div>
<!--/ko-->

一部の再レンダリングを回避し、undefined値をサポートするための3番目の方法は、Knockout 2.2とifバインディングを使用することです（そして回避しwithます）。2.2では、ifバインディングは、値が偽の値から真の値になった場合にのみ再レンダリングされますが、ある真の値から別の値に変更された場合は再レンダリングされません。

<!--ko if: Selected-->
<div data-bind="setUpStuff: true">
   <form id="editRec">
     <label>Name</label>
      <input data-bind="value: Selected().name" />
   </form>
</div>
<!--/ko-->
于 2013-01-04T20:40:55.700 に答える