Knockout：对 observable 数组进行 push 使得每个 item 的计算 observable 被执行

Question

在下面的代码中，我将一个项目添加到可观察数组中。这会导致所有先前的项目在执行 .push 时执行其计算的 observable。这是不必要的。如何防止这种情况？ 我拥有的项目越多，这意味着计算出的每个项目 observable 都会运行。

参见小提琴示例。 http://jsfiddle.net/k8kbdnnv/3/

html代码

    <div id="logs"></div>
<table>  

<tbody data-bind="foreach: CompanySearchRows">
                <tr >
                    <td>
                        <input data-bind='textInput: ClientReference' type="text"  />

                    </td>
                    <td>
                        <input data-bind='textInput: CompanySearchReference' type="text"  />
                    </td>
                </tr>

            </tbody>
</table>

js代码

var viewModel;
var maxTitleRefRows = 50;

function ViewModel() {
    var self = this;
    self.CompanySearchRows = new ko.observableArray([new ItemViewModel()]);
    self.Executions = ko.observable(0);

    self.addRow = function (clientReference) {  


    var newRow = new ItemViewModel();       

    self.CompanySearchRows.push(newRow);  //this causes the code to jump 

into each array item's OnCompanySearchReferenceChanged computed observable 
    };
}


function ItemViewModel() {
    var self = this;   
    self.ClientReference = ko.observable(""); 
    self.CompanySearchReference = ko.observable(""); 

self.OnCompanySearchReferenceChanged = ko.computed(function () {               
    var reference = self.CompanySearchReference();

   logIt("computed executed" + reference);


    if (reference !== ""  ) {                    
        var currentIndex = viewModel.CompanySearchRows.indexOf(self);
        viewModel.Executions(currentIndex);
        var length = viewModel.CompanySearchRows().length;
        var lastItemIndex = length - 1;   
        if (currentIndex === lastItemIndex && length < maxTitleRefRows ) {          
            viewModel.addRow(self.ClientReference());               
        }
    }

    return;
});      
}

var logs=document.getElementById('logs');
function logIt(msg){
    var e=document.createElement('div');
    e.innerHTML=msg;
    logs.insertBefore(e,logs.firstChild);
}

$(document).ready(function () {
    viewModel = new ViewModel();
    ko.applyBindings(viewModel);    
});

Answer 1

computed 函数包含对主 ViewModel 中observableArray 的引用。这意味着如果数组更改（例如，从 push）所有所有项目上的计算函数都会重新评估。

阅读代码，计算函数的意图似乎是在第二个字段中输入值时添加一个新行。所以我们只需要跟踪 last 项就可以做到这一点。通常建议不要在子对象内部执行此操作 - 主视图模型应该管理数组，子对象应该独立于它。

为了实现这一点，我在CompanySearchReference observable 上使用了subscription ，但只在最后一项上。当该值发生变化时，父 ViewModel 将添加新行，同时删除上一行的订阅，因此在任何时候只有一个订阅处于活动状态。

// subscribe to changes on the child's search reference
// when this has a value, create a new row
var subscription = newRow.CompanySearchReference.subscribe(function (newValue) {
   if (newValue && self.CompanySearchRows().length < maxTitleRefRows) {
       // value has been changed: first remove this subscription
       logIt("removing subscription");
       subscription.dispose();
       // add a new row (creates a new subscription on new row)
       logIt("adding new row");
       self.addRow();
   }
});

完整的 JSFiddle 位于 http://jsfiddle.net/Quango/fgfw6Ld0/