Question

I’ve upgraded to KnockoutJs 2 and found that pages that use template bindings have stopped working.

I have a template binding which uses ${ x } bindings, but these aren’t being resolved.

I removed the template and used the new control flow bindings, but it still didn’t work. I had to convert to using data-bind instead.

I don’t really want to convert everything over, I want it to be backward compatible with jquery templates as well as give me the possibility of using the new control flow bindings.

Any idea how to get this working?

Answer 1

If you are using jQuery templates, Knockout 2.0 requires a specific version of it. See the note here from Knockout’s page: http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/

Steve Sanderson mentions …

As mentioned under “backward compatibility notes”, if you are using
jQuery Templates, you’ll need to update it to 1.0.0pre as found at
https://github.com/jquery/jquery-tmpl

• Note that KO 1.3beta ended up being released as KO 2.0.0

If you did not intend to use jQuery templates, please post a jsFiddle of your code and we can help you resolve it.

[UPDATE]
In a further comment you asked about how to do templates. Here are 2 possibilities taken from examples on the Knockouts site http://knockoutjs.com/documentation/template-binding.html) that use native templates for KO 2.0.0

<h2>Participants</h2>
Here are the participants:
<div data-bind="template: { name: 'person-template', foreach: people }"></div>

<script type="text/html" id="person-template">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>

 function MyViewModel() {
     this.people = [
         { name: 'Franklin', credits: 250 },
         { name: 'Mario', credits: 5800 }
     ]
 }
 ko.applyBindings(new MyViewModel());

This gives the same result as embedding an anonymous template directly inside the element to which you use foreach, i.e.:

<div data-bind="foreach: people">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>  
</div>