Binding does not work for knockout collections

Question

I am trying to use knockout.js to display a specification object in the user interface. The specification has a name and has several parameterInfo lines. Each ParameterInfo line has a ParameterPartNumber parameter and a bunch of SignalInputs. Each SignalInput has only one Name property. I can show the specification name, parameterInfo and ParameterPartNumber strings, but I can not show the bunch of SignalInput names that I have, even if the Model specification has values. I am using the following code:

HTML code:

<div id="specificationHeader"> Name : <input data-bind='value: Name' /> <br /> <br /> </div> <table> <thead> <tr> <th> Parameter Part </th> <th> Signal Inputs </th> </tr> </thead> <tbody data-bind="foreach: ParameterInfos"> <tr> <td> <input data-bind='value: ParameterPartNumber' /> </td> <td> <ul data-bind="foreach: SignalInputs"> <li><span data-bind='text: Name' /></li> </ul> </td> </tr> </tbody> </table> 

Javascript / Knockout Code:

 <script type="text/javascript"> var SpecificationModel = function (specification) { var self = this; self.Name = ko.observable(specification.Name); self.ParameterInfos = ko.observableArray(ko.utils.arrayMap(specification.ParameterInfos, function (ParameterInfo) { return { ParameterPartNumber: ParameterInfo.ParameterPartNumber, SignalInputs: ko.observableArray(ParameterInfo.SignalInputs) }; })); }; var specificationData = '@Html.Raw(ViewBag.SpecificationData)'; var viewModel = new SpecificationModel($.parseJSON(specificationData)) ko.applyBindings(viewModel); </script> 

When I run the program in debug mode, I can see the following values:

 var specificationData = '{"Name":"Specification One", "ParameterInfos": [{"ParameterPartNumber":"26-20700-002", "SignalInputs":[{"Name":"Park Brake"},{"Name":"Neutral"}]} ]}'; 

This is strange, because I was able to get an almost similar example, working thanks to the answers to the following question:

It is necessary to transfer the source data as a viewmodel from ASP.NET MVC to knockout.js

However, the binding code does not work. What am I missing?

EDIT:

Well, the following lines work:

 <td data-bind="foreach: SignalInputs"> <ul > <li><span data-bind='text: Name' /></li> </ul> </td> 

But the following lines are not

 <td> <ul data-bind="foreach: SignalInputs"> <li><span data-bind='text: Name' /></li> </ul> </td> 

Any idea why? The last line site works in another example stackoverflow example that I cited.

Answer 1

In my experience, when you come across strange binding errors, this is often due to for-each binding. Since I had so many problems with this, I pretty much just switch to the “contactless” route:

 <!-- ko foreach: myItems --> <li>Item <span data-bind="text: $data"></span></li> <!-- /ko --> 

Answer 2

I had problems with binding, but the problem was that I used an earlier version (knockout 1.2.1) that did not support foreach binding. This did not raise an error for the unrecognized binding function, although when I tried to reference an element within the collection, I was supposedly bound to make it difficult to debug.

In the end, I used the template binding according to the answer here: fooobar.com/questions/910451 / ...

Answer 3

I remember reading in the KnockoutJS documentation that bindings get into problems with empty elements like <span .... /> , and they suggest using <span ...></span> or even <span ...>&nbsp;</span> (the latter is a countermeasure for IE6 error ).

Answer 4

Not sure if this is relevant since this answer was posted so long ago, but I had a problem with foreach. I noticed that the error came from calling jquery in a knockout (I used knockout-2.0.0) and jquery-2.1.1. When I upgraded to knockout-3.1.0, this problem was resolved.

2.0.0 was installed when I installed knockout.mapping via nuget, and it will probably depend on 2.0.0 at least. Hope this helps someone ...