Skip to content

rniemeyer/knockout-interpolate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

knockout-interpolate

What is this plugin?

This library augments Knockout's default binding provider by adding support for interpolating text while Knockout is visiting each node to determine if it has bindings. This text replacement is designed to be done in a one-time manner (does not react to observables being updated). You would use this functionality in cases where you do want to use text from your view model, but do not need/want the overhead of a binding.

While the replaced text would not react to changes, a common use case may be inside of a container that is bound using the template or with binding such that the entire area would get swapped out. Values support context variables ($root, $parent, etc.) and expressions. For interpolation that converts to a containerless binding check out: http://mbest.github.io/knockout.punches/.

The library also allows similar one-way bindings that are not tracked and do not update using the data-koset attribute. The syntax is the same as data-bind, and currently supports visible, if, value, attr, and css bindings.

Note

The css binding depends on either your browser supporting classList, or jQuery being present. If neither of those conditions is satisfied, any usage of the css binding with data-koset will fail silently.

Examples

<div>First name: {{ first }}</div>
<div>Last name: {{ last }}</div>
<div>Full name: {{ first() + " " + last() }}</div>
<div>User: $root.userName</div>

<div data-koset='visible: x'></div>
<div data-koset='if: y'>XXX</div>
<select><option data-koset='value: z'></option></select>
<a data-koset="attr: { href: '#contacts/details/' + id }">{{ name }}</a>
<a data-koset="css: { active: isActive }">{{ name }}</a>

Once you've loaded the library, you enable it like:

ko.bindingProvider.instance = ko.bindingProvider.interpolate;

About

Knockout binding provider that does a one-time replacement of {{ expression }} blocks with data from the view model.

Resources

License

Stars

Watchers

Forks

Packages

No packages published