KnockoutJS 2 and $ bindings don't work anymore

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?

Do you still have a reference to the jQuery tmpl library? I am using KO2 and tmpl together fine. Make sure you aren't using a bit of knockout's native template syntax along with tmpl syntax as I have found this to cause problems in the past. — Mark Robinson

John Papa John Papa · Accepted Answer · 2012-01-04T15:32:12

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>

KnockoutJS 2 and $ bindings don't work anymore

2 Answers