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
Post a Comment