KnockoutJS data refresh writes an internal function to the user interface

Question

I am having this strange problem when I update my view model ... basically with every update, there seems to be a random probability that every observable will contain this data:

function observable() { if (arguments.length > 0) { // Write // Ignore writes if the value hasn't changed if ((!observable['equalityComparer']) || !observable['equalityComparer'](_latestValue, arguments[0])) { observable.valueWillMutate(); _latestValue = arguments[0]; observable.valueHasMutated(); } return this; // Permits chained assignments } else { // Read ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation return _latestValue; } } 

I have been using KnockoutJS for a while and I have never seen anything like it. I assume this has something to do with template binding, but I'm really not sure. I am going to delve into this, but I decided that I would post it here if someone else has this problem or there will be a solution. As I said, this does not happen sequentially, only on occasion.

////Additional Information ////

So, Matt below refers to this (http://stackoverflow.com/questions/9763211/option-text-becomes-a-function-string-after-updated-with-fromjs), which is about the same problem. The only difference is that I use my own template binding in this style:

 <div data-bind="template: {name: 'issueTemplate', data: incidents}"></div> <script id="dashboardIssueTemplate" type="text/html"> <!--ko foreach: $data--> <div data-bind="text: title"></div> </script> 

It was my assumption that KnockoutJS handled the U-turn itself when you pass the observable array to the template binding. I know that I can not say "title ()" in this example because this does not exist. Should I be attached to a command like $ root.title ()?

//// Even more information ////

This problem appears to be due to having two "applyBindings" on the same page. My application contains an external widget that adds its DOM to the DOM of the main page at runtime. This widget uses the syntax ko.applyBindings (vm, ROOTNODE), which should allow the main page to run its own ko.applyBindings (hostVm).

In fact, it does, and it works correctly with every update. However, the problem is that the main page is updating the viewModel without updating. One way or another, the user interface visualization spits out this internal function on EVERYONE associated with the node data. I debugged KnockoutJS and actually confirmed that viewModel and rootNode are correct ... something outside the actual binding captures.

Answer 1

This has something to do with "()" attached to the data object in the template. What I found is that during the first render (page load) this template looks like this:

 <div data-bind="template: {name: 'issueTemplate', data: incidents}"></div> <script id="dashboardIssueTemplate" type="text/html"> <div data-bind="text: title"></div> </script> 

works just fine. However, as soon as you run the update in the observable array, my "title" object will become this function. If I write a template using this style:

 <div data-bind="text: title()"></div> 

It seems to be working on every update.

I am not sure why this is the solution. In appearance, the data object transferred to the Knockout binder is the same both during loading and when the page is refreshed. I will send this as an answer, but I do not mark it as an answer until I understand why this is happening.