我正在尝试使用数据库中的一些下拉选项填充我的视图模型。我想跟踪所选对象,因为它具有我在其他地方的自定义绑定中使用的属性。
我使用“空白”值初始化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()
个调用,则可以正常工作。我认为init
中的jq_fade
函数存在问题。
我收到的错误是:
未捕获错误:无法解析绑定。 消息:TypeError:无法调用undefined的方法'outsideCounsel'; 绑定值:jq_fade:firm()。outsideCounsel()
我理解Knockout告诉我的内容,我只是不确定firm()
是如何成为undefined
因为我设置了一个初始值。
答案 0 :(得分:1)
如果您将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()
并查看是否再次出现错误