Nested templates failed when updating from knockout 2.3 to 3.2

Question

I have a page using knockout 2.3.0 and nested templates that was working fine untill I updated it to version 3.2.0.

If I strip away the rest of the page, the structure that fails looks like this:

...
<!-- ko template: {name: 'meta-data-template', foreach: DocumentMetaDataList} -->
<!-- /ko -->
...

<script type="text/html" id="meta-data-template">
  <label data-bind="text: FieldName() + ':', visible: $root.labelIsVisible($data)"></label>
  <!-- ko template: { name: $root.displayAddFieldTemplate, data: $data } -->
  <!-- /ko -->
</script>**

In this case, displayAddFieldTemplate resolves to "meta-add-template" that looks like this

<script type="text/html" id="meta-add-template">
  <a class="add-fieldvalue" href="#" data-bind="visible: $root.fieldValueIsVisible($data)">Link</a>
</script>  

I have hardcoded $root.fieldValueIsVisible($data) to return true, so that the link should always be shown. This however, gives the following javascript error when I run it in the browser:

Uncaught TypeError: Unable to process binding "template: function (){return { name:$root.displayAddFieldTemplate,data:$data} }"

Message: undefined is not a function

If I remove the data-bind from the meta-add-template , so that is looks like this it works as expected.

<script type="text/html" id="meta-add-template">
  <a class="add-fieldvalue" href="#">Link</a>
</script>  

Even if I inline a value into the data-bind it gives the same error message. So it fails for this template as well:

<script type="text/html" id="meta-add-template">
  <a class="add-fieldvalue" data-bind="visible:true" href="#">Link</a>
</script>  

Why does this not work as expected, and why did it stop working after the update from 2.3 to 3.2?

Answer 1

Are you using an old version of jquery templates? That library has been deprecated. Try removing the reference to that as knockoutjs now has built in support for the same syntax.

jQuery Templates are deprecated?

http://knockoutjs.com/documentation/template-binding.html