can-stache-bindings
Advanced tools
Comparing version 4.3.1 to 4.3.2
@@ -7,3 +7,3 @@ @module can-stache-bindings | ||
Provides template event, one-way bindings, and two-way bindings. | ||
Provides template events, one-way bindings, and two-way bindings. | ||
@@ -14,3 +14,3 @@ @body | ||
The `can-stache-bindings` plugin provides useful [can-view-callbacks.attr custom attributes] for template declarative event, one-way bindings, and two-way | ||
The `can-stache-bindings` plugin provides useful [can-view-callbacks.attr custom attributes] for template declarative events, one-way bindings, and two-way | ||
bindings on element attributes, component [can-component::ViewModel ViewModels], and the [can-view-scope scope]. Bindings look like: | ||
@@ -24,3 +24,3 @@ | ||
__Note:__ DOM attribute names are case-insensitive, but [can-component::ViewModel ViewModel] or [can-view-scope scope] properties can be `camelCase` and [can-stache stache] will encode them so they work correctly in the DOM. | ||
> __Note:__ DOM attribute names are case-insensitive, but [can-component::ViewModel ViewModel] or [can-view-scope scope] properties can be `camelCase` and [can-stache stache] will encode them so they work correctly in the DOM. | ||
@@ -66,3 +66,3 @@ The following are the bindings that should be used with [can-stache]: | ||
> __Note:__ If value being passed to the component is an object, changes to the objects properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
> __Note:__ If the value being passed to the component is an object, changes to the object's properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
@@ -80,3 +80,3 @@ #### [can-stache-bindings.toParent one-way to parent] | ||
If the element does not have a [can-component::ViewModel ViewModel], updates `value` | ||
If the element does not have a [can-component::ViewModel ViewModel], it updates `value` | ||
in the [can-view-scope scope] with the `child-attr` attribute or property of the element. | ||
@@ -88,5 +88,5 @@ | ||
You can also explicitly use the [can-component::ViewModel ViewModel] using `vm:childProp:to="value"` or the element using `el:child-attr:to="value"`. | ||
You can also explicitly use the [can-component::ViewModel ViewModel] with `vm:childProp:to="value"` or the element with `el:child-attr:to="value"`. | ||
> __Note:__ If value being passed to the component is an object, changes to the objects properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
> __Note:__ If the value being passed to the component is an object, changes to the object's properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
@@ -108,7 +108,7 @@ #### [can-stache-bindings.twoWay two-way] | ||
You can also explicitly use the [can-component::ViewModel ViewModel] using `vm:childProp:bind="value"` or the element using `el:child-attr:bind="value"`. | ||
You can also explicitly use the [can-component::ViewModel ViewModel] with `vm:childProp:bind="value"` or the element with `el:child-attr:bind="value"`. | ||
## One Way Binding With Objects | ||
`childProp:from="key"` ([can-stache-bindings.toChild one-way to child]) or `child-prop:to="key"` ([can-stache-bindings.toParent one-way to parent]) is used to pass values from the current scope to a component or vice versa, respectively. | ||
`childProp:from="key"` ([can-stache-bindings.toChild one-way to child]) or `child-prop:to="key"` ([can-stache-bindings.toParent one-way to parent]) is used to pass values from the current scope to a component, or from a component to the current scope, respectively. | ||
@@ -115,0 +115,0 @@ Generally, this binding only observes changes in one direction, but when [can-stache.key] is an object (POJO, DefineMap, etc), it is passed as a reference, behaving in much the same way as the following snippet. |
@@ -48,7 +48,7 @@ @function can-stache-bindings.event on:event | ||
@signature `on:VIEW_MODEL_OR_DOM_EVENT:value:to='SCOPE_VALUE'` | ||
@signature `on:VIEW_MODEL_OR_DOM_EVENT:KEY:to='SCOPE_VALUE'` | ||
If the element has a [can-component::ViewModel ViewModel], listens to an event on the [can-component::ViewModel ViewModel] and binds the element’s value to the SCOPE_VALUE when that event occurs. | ||
If the element has a [can-component::ViewModel ViewModel], listens to an event on the [can-component::ViewModel ViewModel] and binds the element’s value to the `SCOPE_VALUE` when that event occurs. | ||
If the element does **not** have a [can-component::ViewModel ViewModel], listens to an event on the element and binds binds the element’s value to the SCOPE_VALUE when that event occurs. | ||
If the element does **not** have a [can-component::ViewModel ViewModel], listens to an event on the element and binds the element’s value to the `SCOPE_VALUE` when that event occurs. | ||
@@ -93,4 +93,2 @@ ```html | ||
## Use | ||
## DOM events | ||
@@ -114,2 +112,3 @@ | ||
@demo demos/can-stache-bindings/event-args.html | ||
@codepen | ||
@@ -121,3 +120,3 @@ ### Special Event Types | ||
bound by adding attributes like `on:SPECIAL='KEY'`. This is | ||
similar to [$.special](http://benalman.com/news/2010/03/jquery-special-events/). | ||
similar to [$.special](http://benalman.com/news/2010/03/jquery-special-events/) in jQuery. | ||
@@ -167,2 +166,3 @@ ### on:enter | ||
@demo demos/can-component/paginate_next_event.html | ||
@codepen | ||
@@ -169,0 +169,0 @@ ## Changing a property when an event occurs |
@@ -25,3 +25,3 @@ @function can-stache-bindings.raw toChild:raw | ||
The two uses below are equivalent. | ||
The two uses below are equivalent: | ||
@@ -28,0 +28,0 @@ ```html |
@@ -14,3 +14,3 @@ @function can-stache-bindings.toChild toChild:from | ||
> __Note:__ If [can-stache.key] is an object, changes to the objects properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
> __Note:__ If [can-stache.key] is an object, changes to the object's properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
@@ -30,3 +30,3 @@ @param {String} childProp The name of the property to set in the | ||
This signature works, but the following should be used instead: | ||
The above signature works, but the following should be used instead: | ||
@@ -45,3 +45,3 @@ ```html | ||
> __Note:__ If [can-stache.key] is an object, changes to the objects properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
> __Note:__ If [can-stache.key] is an object, changes to the object's properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
@@ -58,3 +58,3 @@ Parameters are the same as [can-stache-bindings.toChild#childProp_from__key_ childProp:from="key"] | ||
This signature works, but the following should be used instead: | ||
The above signature works, but the following should be used instead: | ||
@@ -80,1 +80,2 @@ ```html | ||
@demo demos/can-stache-bindings/to-child.html | ||
@codepen |
@@ -15,6 +15,6 @@ @function can-stache-bindings.toParent toParent:to | ||
> __Note:__ If [can-stache.key] is an object, changes to the objects properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
> __Note:__ If [can-stache.key] is an object, changes to the object's properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
@param {String} childProp The name of the property to export from the | ||
child components viewmodel. Use `this:to` or `.:to` to export the entire viewModel. | ||
child component's viewmodel. Use `this:to` or `.:to` to export the entire viewModel. | ||
@@ -45,3 +45,3 @@ @param {can-stache/expressions/literal|can-stache/expressions/key-lookup|can-stache/expressions/call|can-stache/expressions/helper} key An expression that will be used to set in the parent scope. | ||
> __Note:__ If [can-stache.key] is an object, changes to the objects properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
> __Note:__ If [can-stache.key] is an object, changes to the object's properties will still be visible to the component. Objects are passed by reference. See [can-stache-bindings#OneWayBindingWithObjects One Way Binding With Objects]. | ||
@@ -61,3 +61,3 @@ Parameters are the same as [can-stache-bindings.toParent#childProp_to__key_ childProp:to="key"] | ||
@signature `on:VIEW_MODEL_OR_DOM_EVENT:value:to='SCOPE_VALUE'` | ||
@signature `on:VIEW_MODEL_OR_DOM_EVENT:KEY:to='SCOPE_VALUE'` | ||
@@ -82,3 +82,3 @@ If the element has a [can-component::ViewModel ViewModel], listens to an event on the [can-component::ViewModel ViewModel] and binds the element’s value to the SCOPE_VALUE when that event occurs. | ||
Depending on whether the element has a [can-component.prototype.ViewModel ViewModel], `:to` bindings change | ||
between exporting __viewModel properties__ or __DOM properties__. | ||
between exporting __ViewModel properties__ or __DOM properties__. | ||
@@ -90,3 +90,3 @@ ## Exporting ViewModel properties | ||
In the following example, it connects the __selected__ driver in `<drivers-list>` with an editable __plateName__ in | ||
The following example connects the __selected__ driver in `<drivers-list>` with an editable __plateName__ in | ||
`<edit-plate>`: | ||
@@ -99,3 +99,6 @@ | ||
Click on one of the list items below and watch as its text appears in the input box. You can then edit the text and it will update in the list. | ||
@demo demos/can-stache-bindings/to-parent.html | ||
@codepen | ||
@@ -127,4 +130,5 @@ ## Exporting DOM properties | ||
Check it out in this demo: | ||
Check it out in this demo by clicking on the list items: | ||
@demo demos/can-stache-bindings/to-parent-function.html | ||
@codepen |
@@ -31,3 +31,3 @@ @function can-stache-bindings.twoWay twoWay:bind | ||
Two-way binds the element’s `child-prop` property or attribute to | ||
[can-stache.key] in the parent [can-view-scope scope]. If `child-prop` is updated `key` will be updated | ||
[can-stache.key] in the parent [can-view-scope scope]. If `child-prop` is updated, `key` will be updated | ||
and vice-versa. | ||
@@ -46,3 +46,3 @@ | ||
Two-way binds `childProp` in the [can-component.prototype.ViewModel ViewModel] to | ||
[can-stache.key] in the parent [can-view-scope scope]. If `childProp` is updated `key` will be updated | ||
[can-stache.key] in the parent [can-view-scope scope]. If `childProp` is updated, `key` will be updated | ||
and vice-versa. | ||
@@ -67,3 +67,3 @@ | ||
Two-way binds the element’s `child-prop` property or attribute to | ||
[can-stache.key] in the parent [can-view-scope scope]. If `child-prop` is updated `key` will be updated | ||
[can-stache.key] in the parent [can-view-scope scope]. If `child-prop` is updated, `key` will be updated | ||
and vice-versa. | ||
@@ -88,3 +88,6 @@ | ||
Click on one of the list items below and watch as its text appears in the input box. You can then edit the text and it will update in the list. | ||
@demo demos/can-stache-bindings/two-way.html | ||
@codepen | ||
@@ -94,2 +97,3 @@ This demo can be expressed a bit easier with the references scope: | ||
@demo demos/can-stache-bindings/reference.html | ||
@codepen | ||
@@ -99,8 +103,6 @@ ## Initialization | ||
When a binding is being initialized, the behavior of what the viewModel and scope properties | ||
are set to depends on their initial values. | ||
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. | ||
- If the viewModel value is `defined` 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. |
{ | ||
"name": "can-stache-bindings", | ||
"version": "4.3.1", | ||
"version": "4.3.2", | ||
"description": "Default binding syntaxes for can-stache", | ||
@@ -5,0 +5,0 @@ "homepage": "https://canjs.com/doc/can-stache-bindings.html", |
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
167309
1