Data binding with Bindary
Bindary binds HTML to a JavaScript data object using b-* attributes.
The strict form uses data-bindary-* instead, for example data-bindary-bind
and data-bindary-value, useful if you're working in an environment that expects
standard data attributes.
Data lives on $bindary.appData, the global data store, which is what
the examples on this page use. Bindary also has route-, view- and component-scoped
stores for narrower lifetimes, see the Bindary overview.
Repeating with scoped context
b-context scopes a subtree to a data object, so nested keys don't need the full path.
Inside b-repeat, each item becomes its own context automatically and {{ }}
lets you write an expression directly rather than binding a separate controller function.
If both attributes sit on the same element, b-repeat resolves against the outer context first, b-context then applies per item, not the other way around.
<div b-context="getStarted">
<ul>
<li b-repeat="colors">
<b b-value="name"></b>:
{{type === 'warm' ? 'warm' : (type === 'cool' ? 'cool' : 'neutral')}}
</li>
</ul>
</div>
$bindary.appData.getStarted = {
colors: [
{ name: "Red", type: "warm" },
{ name: "Blue", type: "cool" },
{ name: "Green", type: "neutral" }
]
};
Result
-
:
{{type === 'warm' ? 'warm' : (type === 'cool' ? 'cool' : 'neutral')}}
For rendering entirely different elements per branch, not just text, b-if, b-else-if,
and b-else do that and they resolve the same way any data-key does: through the current
context, no globals required. See the Bindary attribute reference for that pattern.
Two-way binding
An input tied to a value and a span that reflects it, again scoped with b-context.
<div b-context="getStarted">
<input type="text" placeholder="Type here" b-bind="inputValue" />
<b>data value:</b> <span b-value="inputValue"></span>
</div>
$bindary.appData.getStarted.inputValue = "";
Result
data value:
For everything else Bindary can do (b-context, b-include, b-attributes and more), see the Bindary attribute reference.