escaping curly braces in jquery templates and knockout js

I have a jquery template in which I have knockout js binding to a fun开发者_开发百科ction literal, the function literal has curly braces inside and they are been wrongly interpreted by the template engine, here is the template:

<button {{html "data-bind='click: function(){ loadProduct(" + i + ") }'" }}>${ product.Name }</button>

Is there any way to scape those braces? I've tried the {#literal} tag without success, also I wrapped everying in the {{ html }} tag because the hyphen in "data-bind" is also wrongly interpreted by the engine.

If you want to add data-bind attributes in your jQuery template, then it is not necessary to do so much escaping.

I am assuming that "i" in your case is from looping through your products using something like {{each(i, product) Products}}. In your template, you can define this element like:

<button data-bind="click: function(){ loadProduct(i); }">${product.Name}</button>

It will have access to the variable "i" in the function without concatenating strings.

Sample here: http://jsfiddle.net/rniemeyer/Pq5Vd/

Thanks.

Are you sure that's the problem? jQuery templates should only recognize double curly brackets. Single curly should work fine like here > http://jsfiddle.net/neebz/9fsv2/