次の例の select が HTML でレンダリングされない理由。エラーはキャッチされず、applyBindings() は正常に動作しているようですが、ドロップダウンが html に表示されません...
JS コードは次のとおりです。
$(document).ready(function () {
try
{
var mainVM = new MainViewModel();
mainVM.CategoriesVm.Init(document.getElementById("divCategoriesView"));
mainVM.CategoriesVm.BindViewModel();
ko.applyBindings(mainVM.CategoriesVm, mainVM.CategoriesVm.DomSection);
alert('finished');
}
catch(err)
{
alert(err);
}
});
function MainViewModel() {
var self = this;
this.CategoriesVm = new CategoriesViewModel();
return self;
};
function CategoriesViewModel() {
var self = this;
self.$type = 'CategoriesViewModel';
self.Categories = ko.observableArray();
self.selectedCategory = ko.observable();
self.DomSection = null;
this.Init = function (domSectionElement) {
self.DomSection = domSectionElement;
};
var GetJsObject = function (obj) {
if (obj && ObjectTypeChecker.IsJsonObject(obj)) {
obj = $.parseJSON(obj);
}
if (obj && obj.d) {
obj = eval(obj.d);
}
return obj;
};
this.BindViewModel = function (jsonCategories) {
try {
var data = [{
CategoryID: 1,
CategoryName: "red"
}];
self.Categories(data);
ko.mapping.fromJS(self.Categories, self);
} catch (err) {
alert(err);
}
};
};
HTML は次のとおりです。
<div id="divMainView">
<div id="divCategoriesView" data-bind="with: MainViewModel.CategoriesViewModel">
<select ID="ddlProductCategory" data-bind="options: Categories, optionsValue: CategoryID, optionsText: CategoryName, value: selectedCategory">
</select>
</div>
</div>