How can I use variable interpolation in HTML attributes (Knockout.js)?

Question

I'm using Knockout.js as data binding framework, and have a plugin that allows {{expr}} syntax in my views. So far, so good. But I would also like to use this syntax in HTML attributes. Any ideas how I can manage that?

Works

<textarea>{{input}}</textarea>
<input type="text" data-bind="attr:{'value': input}" />
<input type="text" data-bind="value: input" />

Doesn't work

<input type="text" value="{{input}}" />

I working demo can be found here: http://jsfiddle.net/dC3Ge/1/

Thanks

Answer 1

Michael Best, the ko core committer, has a project Knockout.Punches meets exactly your requirement.

http://mbest.github.io/knockout.punches/