1

我有两个选择列表。第二个应该根据第一个的值和从 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

第一个选择列表填充正常。

4

0 回答 0