GitHub
TwittertwoWay:bind
Two-way bind a value in the viewModel or the element to the parent scope.
childProp:bind="key"
Two-way binds childProp in the ViewModel to
key in the parent scope. If childProp is updated key will be updated
and vice-versa.
<my-component someProp:bind="value"/>
When setting up the binding:
- If
childPropisundefined,keywill be set tochildProp. - If
keyisundefined,childPropwill be set tokey. - If both
childPropandkeyare defined,keywill be set tochildProp.
Parameters
- childProp
{String}:The name of the property of the viewModel to two-way bind.
- key
{Literal Expression|KeyLookup Expression|Call Expression|Helper Expression}:A call expression whose value will be used to two-way bind in the parent scope.
child-prop:bind="key"
Two-way binds the element’s child-prop property or attribute to
key in the parent scope. If child-prop is updated key will be updated
and vice-versa.
<input value:bind="name"/>
Parameters
- child-prop
{String}:The name of the element’s property or attribute to two-way bind.
- key
{Literal Expression|KeyLookup Expression|Call Expression|Helper Expression}:A call expression whose value will be used to two-way bind in the parent scope.
vm:childProp:bind="key"
Two-way binds childProp in the ViewModel to
key in the parent scope. If childProp is updated key will be updated
and vice-versa.
<my-component vm:someProp:bind="value"/>
When setting up the binding:
- If
childPropisundefined,keywill be set tochildProp. - If
keyisundefined,childPropwill be set tokey. - If both
childPropandkeyare defined,keywill be set tochildProp.
Parameters are the same as childProp:bind="key"
el:child-prop:bind="key"
Two-way binds the element’s child-prop property or attribute to
key in the parent scope. If child-prop is updated key will be updated
and vice-versa.
<input el:value:bind="name"/>
Parameters are the same as child-prop:bind="key"
Use
childProp:bind="key" is used to two-way bind a value in a ViewModel to
a value in the scope. If one value changes, the other value is updated.
The following two-way binds the <edit-plate> element’s plateName to the editing.licensePlate
value in the scope. This allows plateName to update if editing.licensePlate changes and
editing.licensePlate to update if plateName changes.
This demo can be expressed a bit easier with the references scope:
Initialization
When a binding is being initialized, the behavior of what the viewModel and scope properties are set to depends on their initial values.
If the viewModel value is not undefined and the scope is undefined, scope will be set to the viewModel value.
If the viewModel value is undefined and the scope is not undefined, viewModel will be set to the scope value.
If both the viewModel and scope are not undefined, viewModel will be set to the scope value.