javascript - Knockout.js 使用 "with"绑定(bind)问题

Question

我有一个具有以下设置(或多或少)的应用程序:

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>

我在调用 VMs Select 函数的表行上有一个点击绑定(bind)设置。使用“with”绑定(bind)会在 Selected() 未定义时删除表单，并在 Selected() 有记录时添加回来。每次发生这种情况时，我都会丢失附加到表单的验证、选项卡和事件绑定(bind)(非 KO 绑定(bind))。该应用程序运行完美，但在记录之间更改时会出现一些性能问题，因为它必须重新添加表单、设置验证、ui 配置和绑定(bind)。

有没有办法让表单保留在页面上，保留我的绑定(bind)和设置，或者我是否会在每次更改 Selected 值时被迫处理命中？

Answer 1

目前 with 绑定(bind)将其内容视为模板，并在 with 值更改时重新呈现。避免重新渲染的唯一方法是不使用 with。

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

当然，如果Selected有时可以是undefined，这就不行了，必须另寻他法。最好的方法是使用自定义绑定(bind)来设置事件处理程序、验证、选项卡等。

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

避免重新渲染并支持 undefined 值的第三种选择是使用 Knockout 2.2 和 if 绑定(bind)(并避免 with)。在 2.2 中，if 绑定(bind)只会在值从 falsy 变为 truthy 时重新呈现，但如果它从一个 truthy 值变为另一个则不会。

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