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>

我在调用 VM 选择功能的表行上有一个单击绑定设置。使用“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值的第三种选择是使用 Knockout 2.2 和if绑定（并避免with）。在 2.2 中，if绑定只会在值变为 false 时重新渲染，但不会在它从一个 true 值变为另一个时重新渲染。

<!--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 回答