Knockout binding inside a template does not work

Question

I am using Knockout and jQuery tmpl. Binding to a data inside "field-string" template does not work.

<div data-bind="template: { name: 'userField', foreach: userFields }"></div>
<script type="text/html" id="userFilter">
   <div data-bind="template: { name: 'field-string', data: { field: data, index: $index } }">
   </div>
</script>

<script type="text/html" id="field-string">
   <input type="hidden" value="fld.${$data.index}" />
   <input type="text" data-bind="value: field.data" />
</script>

userFields - observableArray inside page viewModel, consists of such objects:

{
   data: ko.observable("")
   fieldName: "Blah-blah"
}

Please help. Thanks!

UPDATE: Here is the fiddle (don't know how to add more libs :(. I also need jquery.tmpl and jquery ) http://jsfiddle.net/WBvpp/

Answer 1

The problem was in incorrect passing data object to a template.

Here is how it should look like:

<div data-bind="template: { name: 'field-string', data: { field: $data, index: $index } }">
</div>

( field: $data - with dollar sign )

Answer 2

Is this what you are looking for :

<div data-bind="template: { name: 'userField', foreach: userFields }"></div>
<script type="text/html" id="userField">
   <div data-bind="template: { name: 'field-string', data: {userData: $data, index: $index } }">
   </div>
</script>

<script type="text/html" id="field-string">
   <input type="text" data-bind="value : $data.index" />
    <span data-bind="text: $data.userData.field" ></span>
   <input type="text" data-bind="value :$data.userData.data" />

</script>

I hope it helps.

See fiddle

Answer 3

It all depends on when do you call the ko.applyBindings. If it's before the template is generated, then knockout does nothing with the bindings in the template. Could you provide some more code, or a fiddle?