jquery - KnockoutJS unable to parse bindings when using RequireJS -


i have 2 select lists. second 1 should populated depending on value of first , data returned ajax request:

<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> 

i had working before, trying abstract functionality separate modules 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);     } }) 

it gets kicked off with

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);     }); }); 

it working ok before moved things modules, i'm pretty sure json server ok, get:

uncaught error: unable parse bindings. message: referenceerror: child_name not defined; bindings value: text: child_name, option:$data  

the first select list populates alright.


Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c# - Copy ObservableCollection to another ObservableCollection -

All overlapping substrings matching a java regex -