Declarative template data binding.
Features:
- Immutable data
- Incremental DOM
ipoxy.bind(target, data)
Can be used inside text:
<input type="text" value="{{ todo.task }}" />
Your task: {{ todo.task }}
<ul>
<template repeat="{{ todos }}">
<li>{{ task }}</li>
</template>
</ul>
<template if="{{ todos.length }}">
You have {{ todos.length }} todos left.
</template>
You can also combine if
and repeat
.
<template unless="{{ todos.length }}">
Well done, you have no todos left!
</template>
You can also combine unless
and repeat
.
<input type="checkbox" checked="{{ todo.isDone }}" />
<select value="{{ isDone }}">
<option value="true">true</option>
<option value="false">false</option>
</select>
<input type="radio" name="isDone" value="true" checked="{{ isDone }}" /> True
<input type="radio" name="isDone" value="false" checked="{{ isDone }}" /> False
<input type="text" value="{{ todo.task }}" />
<textarea>{{ todo.task }}</textarea>
{{ expression | filterName }}
Do not encode html entities.
<span class="{{ item.selected | class('active') }}"></span>
// getter only
epoxy.registerFilter('uppercase', function(value) {
return value.length
})
// getter and setter
epoxy.registerFilter('uppercase', {
get: function(value) {
return value
},
set: function(value) {
return value.toUpperCase()
}
})