Knockout.JS通過AJAX綁定到DropDownList的Observable Array

我想用數據庫中的一些下拉選項填充我的視圖模型。我想跟蹤選定的對象，因爲它具有我在其他地方的自定義綁定中使用的屬性。Knockout.JS通過AJAX綁定到DropDownList的Observable Array

我使用「空白」值初始化observable，以便在發生綁定和我的自定義綁定時正確設置它。一旦服務器響應，我將數據轉換爲可觀察數組，然後下拉列表顯示選項。

下面是JavaScript代碼：

ko.bindingHandlers.jq_fade = { 
    init: function (element, valueAccessor) { 
     // Initially set the element to be instantly visible/hidden depending on the value 
     var value = valueAccessor(); 
     $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable 
    }, 
    update: function (element, valueAccessor) { 
     // Whenever the value subsequently changes, slowly fade the element in or out 
     var value = valueAccessor(); 
     ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut(); 
    } 
}; 

function Firm(id, name, outsideCounsel) { 
    this.name = name; 
    this.id = id; 
    this.outsideCounsel = outsideCounsel; 
} 

function RequestViewModel() { 
    var self = this, 
     ONE_DAY = 1000 * 60 * 60 * 24; 


    self.firm = ko.observable(new Firm(-1, "", false)); 

    $.post(ajaxAddress + 'LoadFirms', function (data) { 
     var mappedFirms = $.map(data.d, function (item) { 
      return new Firm(item.OrganizationLookupID, item.OrganizationLookupName, item.IsExternalCounselFirm); 
     }); 
     self.availableFirms(mappedFirms); 
     self.firm(self.availableFirms()[0]); 
    }); 
} 


$(document).ready(function() { 
    model = new RequestViewModel(); 
    ko.applyBindings(model); 
});

下面是相關HTML

<span data-bind="jq_fade: firm().outsideCounsel"> 
    Outside Counsel 
    <input type="text" id="outsideCounsel" data-bind="value: outsideCounsel" /> 
</span>

我想是DIV只顯示如果選擇的公司是一個外部顧問。如果刪除行data-bind="jq_fade: firm().outsideCounsel，一切工作正常。如果我同步撥打$.post()，它就會起作用。我在考慮jq_fade中的init函數有問題。

我收到的錯誤是：

Uncaught Error: Unable to parse bindings. Message: TypeError: Cannot call method 'outsideCounsel' of undefined; Bindings value: jq_fade: firm().outsideCounsel()

我明白了什麼淘汰賽告訴我，我只是不知道firm()怎能是undefined，因爲我設置的初始值。

來源

2012-02-08 arb

確定服務器返回的數據？如果不是，那麼這行self.firm（self.availableFirms（）[0]）;可能會將self.firm重置爲undefined – 2012-02-08 21:18:29

您可能必須將「json」指定爲$ .post的最後一個參數。 – 2012-02-08 21:24:17

是的，我確定服務器正在返回數據。你指定「json」是正確的。我在頁面中進一步做了一個'$ .ajaxSetup（）'調用。 – arb 2012-02-09 14:24:01

如果你結合availableFirms()一個下拉列表，我假設你也已經綁定firm()相同的列表，以便當另一個是從列表中選擇，firm()就會自動更新，並且所有綁定自動更新。

如果是這種情況，則根本不需要設置firm()，因爲它將設置爲下拉列表中的第一個元素。

見例如3瀏覽：

http://knockoutjs.com/documentation/options-binding.html

var viewModel = { 
    availableCountries : ko.observableArray([ 
     new country("UK", 65000000), 
     new country("USA", 320000000), 
     new country("Sweden", 29000000) 
    ]), 
    selectedCountry : ko.observable() // Nothing selected by default 
};

嘗試它像上面沒有專門設置firm()，看看它是否再次錯誤

來源

2012-02-09 14:39:58 soniiic

Knockout.JS通過AJAX綁定到DropDownList的Observable Array

回答

相關問題