knockout.js - Simple Knockout + Bootstrap Typeahead plugin race condition -

knockout.js - Simple Knockout + Bootstrap Typeahead plugin race condition -

i have very simple bootstrap typeahead binding (jsfiddle) knockout.js, this:

ko.bindinghandlers.typeahead = { init: function (element, valueaccessor) { var $e = $(element), source = valueaccessor(); $e.typeahead({ source: source, minlength: 0 }); }, };

its usage simple:

<input data-bind='typeahead: source, value: item, valueupdate: "afterkeydown"' />

the binding works expected in jsfiddle. when loaded requirejs, not work expected. there seems race status knockout , jquery loading in parallel.

if @ change event handlers bound input element, if jquery handler binding works expected. if knockout handler change event then, example, if type "alp", , typeahead suggests "alpha", , select "alpha" typeahead dropdown list <input> element show selected text ("alpha"), bound observable "alp".

in current system, typeahead binding cannot straight modify given observables, passing { source: src, observable: item } not resolve issue. role of typeahead binding update content of bound input area.

i have experimented triggering related events binding, such 'keydown', 'keypress' , 'keyup', obvious reasons not resilient option.

i suspect problem related indeterministic nature of requirejs, , typeahead plugin works or not depending on whether jquery or knockout loaded first. in particular, seems problem resolved making jquery dependency of knockout (i.e. loading jquery first) requirejs's shim:

requirejs.config({ shim: { knockout: { deps: ['jquery'] }, } });

this seems odd, , understand improve happening here , if reasonable resolution of problem – i.e. addressing underlying problem here, or issue crop subsequent versions of knockout or jquery.

i grateful thoughts.

edit

you can replicate problem loading scripts in-order inline eg:

<script src='knockout.js'></script> <script src='jquery.js'></script>

here jsfiddle exhibiting issue.

in above order plugin fail; otherwise work expected.

in case, requirejs config this:

requirejs.config({ baseurl: "/script", shim: { knockout: { deps: ['jquery'] }, # remove race status } });

a simplified version of main has require(['jquery', 'knockout', 'bindings'], ...), bindings defines knockout handler. bindings.js file starts define(['knockout', 'jquery'], ...).

in case though problem not requirejs, ordering of scripts.

i suspect you're missing dependency somehow. bootstrap.

see illustration here. you're right @ shim config. http://jsfiddle.net/jaquers/sfvy9/2/

requirejs.config({ shim: { 'bootstrap': { deps: ['jquery'], exports: 'jquery.fn.typeahead' // can't test more 1 object } } });

knockout.js jquery knockout-2.0