CODEWITHSUNDEEP
javascriptmvvmknockout.js
Dellirium
Dellirium

Reputation: 1516

Can't understand the binding issue

I've been working with this type of binding (using knockout.js) a while ago and everything worked fine, but today a new issue arose. Namely:

I have a rather complex view model that has "parts" that are based on a certain process parameter. The entire viewmodel is "bound" to the page, but any process only ever uses its own parts. To put it simply, imagine this is your viewmodel:

{
    1: Object (actual view model)
    2: Object (actual view model)
    3: Object (actual view model)
    6: Object (actual view model)
    getModelData = function(paramNumber) //returns the view model)
    extractJSObject = function(paramNumber) //console.logs a "JS" object
}

Now, the usual data-bind syntax in most tutorials follows something along the lines of:

<input data-bind="value: displayedValue">

And a view model with an observable named displayedValue is present in the view model. The syntax that I am using however follows these rules however:

<input data-bind="value: getModelData( processID ).DataSets. nameOfDataSet ()[ indexOfDataElement ]. fieldName">

to give you an example: <input data-bind="value: getModelData(1).DataSets.Countries()[0].CountryPhoneCode">

Now, for some reason, this doesn't seem to work, where previously it used to work. Mainly the getModelData() function exists within a viewModel that is bound to the HTML and it does return whatever it needs to so don't be confused by this, its a regular binding, just as if you were to bind any other object, but I am assuming somewhere along the lines later on something gets #@#cked.

The image shows the console error message, as well as my two lines of code which return the expected results, why does my own typing in console work properly but the model is still not being able to bind itself is beyond me.

enter image description here

EDIT: One last thing, in the HTML the binding is not as shown as error in the console, the binding is exactly like this:

<input data-bind="value: getModelData(6).DataSets.HumanUser()[0].Address">

Upvotes: 1

Views: 75

Answers (2)

Dellirium
Dellirium

Reputation: 1516

Okay so since I fiddled around with versions of libraries that are being used and the order in which they are used here is the conclusion:

  1. Knockout.js does not require jQuery for it to function, it works fine without it, matter of fact, as soon as i removed any jQuery the page started working and binding worked.
  2. If however jQuery is present, it must be loaded BEFORE knockout.js because otherwise this error occurs. An exception to this rule is on #3
  3. Old versions of jQuery do not conflict for some reason, even if loaded after knockout.js, but any newer version needs to be loaded beforehand.

Ordering the scripts like: 1. jQuery 2. knockout 3. bootstrap Made it all work nicely, thanks for all the assistance and direction you made me look at.

EDIT: well... apparently it was working for about an hour, aaaand now no longer works o.0 I really thought I got to the end of it.

EDIT 2: apparently server was delivering a cached version which didnt have any jQuery at all from the time i was removing it. The correct answer and the reason is marked as "answered" Thanks all.

Upvotes: 1

Jason Spake
Jason Spake

Reputation: 4304

jQuery deprecated bind in 3.0 when the Slim version was also released, but it seems that Knockout still assumes .bind exists when jQuery is present so when you do have an include for jQuery it needs to be the full jQuery not the slim version. The difference being that the slim version of jquery "excludes ajax, effects, and currently deprecated code" -reference

Upvotes: 2

Related Questions