淘汰賽js計算未被解雇

Question

可以在http://jsfiddle.net/6kMWM/10/上找到該代碼。

在FilterViewModel中，我正在創建一個可觀察的對象。

var FilterViewModel=  ko.observable({
    Name: ko.observable("test"),
    Code: ko.observable("test"),
    Number: ko.observable("test")
});

然后在BankViewModel中，我正在運行一個計算方法，當任何輸入框發生更改時，都應觸發該方法。

var BankViewModel = function(){
    var self = this;
        self.Collection = ko.observableArray([]),
        self.filteredCollection = ko.computed(function () {

            var filter = FilterViewModel();
            alert("invoked");
        }),
        self.add = function (bankObject) {
            self.Collection.push(bankObject);
        },
        self.isSelected = function (data) {
            $('.bank').css('background-color', 'white'); 
            $('.bank p').css('color', '#333');
            $('#bank-row-' + data.Code()).css('background-color', 'blue');
            $('#bank-row-' + data.Code()+" p").css('color', 'white');

        }
};

由於某種原因，它沒有被解雇。 誰能幫我一個忙。

謝謝高級

Answer 1

您需要使用如下語句實例化視圖模型：

var model = new BankViewModel();

實例化模型時，將首先評估其計算方法。 這是您的alert將觸發的位置。

但是，我假設您想讓您的計算方法訂閱Name，Code和Number屬性。 在這種情況下，您需要在計算方法中至少讀取一次這些屬性。

這就是KO中依賴項跟蹤的工作方式。 它記錄了您在計算函數中提到的所有可觀察對象，並將它們記錄下來。 當這些可觀察值之一更新時，您的計算將再次進行評估。

對於此處的代碼，您的計算對象將訂閱FilterViewModel但不會訂閱其單獨的屬性 Name ， Code和Number 。 因此，如果需要訂閱這些單個屬性中的更改，則必須在計算函數中單獨提及它們。 好吧，如果它們無論如何都不會影響您的計算功能，那么讓您的計算來訂閱它們是沒有意義的。

如果您想了解該流程的工作原理，請查看其文檔： http : //knockoutjs.com/documentation/computedObservables.html

Answer 2

您的小提琴有幾個問題：

1. 您綁定到值而不是可觀察值。 當您編寫<input type="text" data-bind="value: global.filterViewModel().Name()" placeholder="Filter by Name"/> ko使用global.filterViewModel().Name的值， global.filterViewModel().Name不是可觀察的。 因此沒有真正的綁定（更新ko將不會更新接口，更新接口將不會更新ko）。 您需要刪除最后一個括號： global.filterViewModel().Name
2. 您在綁定中放置名稱而不是代碼，反之亦然
3. 您訂閱了FilterViewModel的更改，但不是子級可觀察的更改。 為此，請將子可觀察值的評估包括在您計算的可觀察值中：

-

self.filteredCollection = ko.computed(function () {
    var filter = FilterViewModel();    
    if (filter.Name() != 'testname')
        alert("name");
    if (filter.Code() != 'testcode')
        alert("code");
    if (filter.Number() != 'testnumber')
        alert("number");
}),

您可以在這里測試http://jsfiddle.net/b37tu/1/