jquery - RequireJS の使用時に KnockoutJS がバインディングを解析できない

Question

2 つの選択リストがあります。2 番目の値は、最初の値と 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 

最初の選択リストは問題なく表示されます。