我有两个选择列表。应该填充第二个,具体取决于第一个值和ajax请求返回的数据:
<select id="parent" data-bind="options: parentOptions, value:selectedParentOption, optionsText: 'parent_name'"></select>
<select id="children" data-bind="value:selectedChildOption, visible:hasChildOptions">
<!-- ko if:hasChildOptions -->
<!-- ko foreach: children -->
<option data-bind="text: child_name, option:$data"></option>
<!-- /ko -->
<!-- /ko -->
</select>
之前我曾经使用它,但我正在尝试使用RequireJS将功能抽象到单独的模块中:
// VIEWMODEL MODULE
define(["knockout", "ajax"], function(ko, ajax) {
return function ViewModel()
{
self = this;
self.parentOptions = ko.observable();
self.selectedParentOption = ko.observable();
self.hasChildOptions = ko.computed(function(){
if(!self.selectedParentOption()) return false;
if(!self.selectedParentOption().has_children)) return false;
childOptions = ajax.loadChildOptions(self.selectedParentOption().id);
childOptions.success(function(data){
self.childOptions(data);
})
return true;
})
self.childOptions = ko.observableArray([]);
self.selectedChildOption = ko.observable();
}
});
//AJAX MODULE
define(['jquery', 'knockout', 'parentoption', 'childoption'], function($, ko, ParentOption, ChildOption){
function loadParentOptions () {
return $.getJSON('get_parent_options', function(data){
var mappedParentOptions = $.map(data, function(item){
return new ParentOption(item.id, item.parent_name, item.has_children);
})
return mappedParentOptions;
})
}
function loadChildOptions (parentId) {
return $.getJSON('get_child_options', { parent: parentId}, function(data){
var mappedChildOptions = $.map(data, function(item){
return new ChildOption(item.id, item.child_name);
})
return mappedChildOptions;
})
}
return {
loadParentOptions: loadParentOptions,
loadChildOptions: loadChildOptions
}
});
//PARENT OPTION MODULE
define(["knockout"], function(ko){
return function ParentOption(id, name, has_children){
this.id = ko.observable(id);
this.parent_name = ko.observable(name);
this.has_children = ko.observable(has_children);
}
})
//CHILD OPTION MODULE
define(["knockout"], function(ko){
return function ChildOption(id, name){
this.id = ko.observable(id);
this.child_name = ko.observable(name);
}
})
用
开始define(["jquery", "knockout", "viewmodel", "ajax"],function($, ko, ViewModel, ajax) {
var vm = new ViewModel();
ko.applyBindings(vm);
parentOptions = ajax.loadParentOptions();
parentOptions.success(function(data){
vm.parentOptions(data);
});
});
在把东西搬进模块之前它工作正常,所以我很确定服务器上的json是好的,但现在我得到了:
Uncaught Error: Unable to parse bindings.
Message: ReferenceError: child_name is not defined;
Bindings value: text: child_name, option:$data
第一个选择列表填充正常。