can-stache-bindings - npm Package Compare versions

Comparing version 3.0.0-pre.4 to 3.0.0-pre.5

can-stache-bindings.js

@@ -22,3 +22,3 @@ // # can/view/bindings/bindings.js
 var compute = require('can-compute');
-var observeReader = require('can-observe-info/reader/reader');
+var observeReader = require('can-observation/reader/reader');
 
@@ -25,0 +25,0 @@ var assign = require('can-util/js/assign/assign');

package.json

 {
   "name": "can-stache-bindings",
-  "version": "3.0.0-pre.4",
+  "version": "3.0.0-pre.5",
   "description": "Default binding syntaxes for can-stache",
@@ -23,3 +23,3 @@ "homepage": "http://canjs.com",
     "build": "node build.js",
-    "document": "documentjs",
+    "document": "bit-docs",
     "develop": "done-serve --static --develop --port 8080"
@@ -57,21 +57,21 @@ },
   "dependencies": {
-    "can-compute": "^3.0.0-pre.1",
+    "can-compute": "^3.0.0-pre.5",
     "can-event": "^3.0.0-pre.2",
-    "can-observe-info": "^3.0.0-pre.5",
+    "can-observation": "^3.0.0-pre.0",
     "can-util": "^3.0.0-pre.8",
-    "can-view-callbacks": "^3.0.0-pre.1",
+    "can-view-callbacks": "^3.0.0-pre.4",
     "can-view-live": "^3.0.0-pre.1",
     "can-view-model": "^3.0.0-pre.3",
-    "can-view-scope": "^3.0.0-pre.4",
-    "can-stache": "^3.0.0-pre.6"
+    "can-view-scope": "^3.0.0-pre.7",
+    "can-stache": "^3.0.0-pre.8"
   },
   "devDependencies": {
-    "can-define": "^0.6.0",
+    "can-define": "^0.7.7",
     "can-list": "^3.0.0-pre.1",
     "can-map": "^3.0.0-pre.2",
     "can-view-nodelist": "^3.0.0-pre.2 ",
-    "cssify": "^0.6.0",
-    "documentjs": "^0.4.2",
+    "cssify": "^1.0.2",
+    "bit-docs": "0.0.7",
     "done-serve": "^0.2.0",
-    "donejs-cli": "^0.8.0",
+    "donejs-cli": "^0.9.5",
     "generator-donejs": "^0.9.0",
@@ -83,3 +83,19 @@ "jshint": "^2.9.1",
     "testee": "^0.2.4"
+  },
+  "bit-docs": {
+    "dependencies": {
+      "bit-docs-glob-finder": "^0.0.5",
+      "bit-docs-dev": "^0.0.3",
+      "bit-docs-js": "^0.0.3",
+      "bit-docs-generate-readme": "^0.0.8"
+    },
+    "glob": {
+      "pattern": "**/*.{js,md}",
+      "ignore": "node_modules/**/*"
+    },
+    "readme": {
+      "apis": "./doc/apis.json"
+    },
+    "parent": "can-view-live"
   }
 }

readme.md

@@ -5,53 +5,199 @@ # can-stache-bindings
 
-Default binding syntaxes for can-stache
+Default binding syntaxes for [can-stache](https://github.com/canjs/can-stache).
 
-## Usage
+  - <code>[{(child-prop)}="key"](#child-propkey)</code>
+  - <code>[{($child-prop)}="key"](#child-propkey)</code>
+  - <code>[{child-prop}="key"](#child-propkey)</code>
+  - <code>[{$child-prop}="key"](#child-propkey)</code>
+  - <code>[{^child-prop}="key"](#child-propkey)</code>
+  - <code>[{^$child-prop}="key"](#child-propkey)</code>
+  - <code>[($DOM_EVENT)='CALL_EXPRESSION'](#dom_eventcall_expression)</code>
+  - <code>[(VIEW_MODEL_EVENT)='CALL_EXPRESSION'](#view_model_eventcall_expression)</code>
+  - <code>[*ref-prop](#ref-prop)</code>
 
-### ES6 use
+## API
 
-With StealJS, you can import this module directly in a template that is autorendered:
 
-```js
-import plugin from 'can-stache-bindings';
-```
+### <code>{(child-prop)}="key"</code>
 
-### CommonJS use
 
-Use `require` to load `can-stache-bindings` and everything else
-needed to create a template that uses `can-stache-bindings`:
+  Two-way binds `childProp` in the  [can.Component::viewModel viewModel] to 
+  [can.stache.key] in the parent [can.view.Scope scope].  If `childProp` is updated `key` will be updated
+  and vice-versa.
+  
+  ```
+  <my-component {(some-prop)}="value"/>
+  ```
+  
+  When setting up the binding:
+  
+  - If `childProp` is `undefined`, `key` will be set to `childProp`.
+  - If `key` is `undefined`, `childProp` will be set to `key`.
+  - If both `childProp` and `key` are defined, `key` will be set to `childProp`.
+  
 
-```js
-var plugin = require("can-stache-bindings");
+
+
+1. __child-prop__ <code>{String}</code>:
+  The name of the property of the viewModel to two-way bind.
+  
+1. __key__ <code>{String}</code>:
+  The name of the property to two-way bind in the parent scope.
+  
+
+### <code>{($child-prop)}="key"</code>
+
+
+  Two-way binds the element's `childProp` property or attribute to 
+  [can.stache.key] in the parent [can.view.Scope scope].  If `childProp` is updated `key` will be updated
+  and vice-versa.
+
+  ```
+  <input {($value)}="name"/>
+  ```
+
+
+1. __child-prop__ <code>{String}</code>:
+  The name of the element's property or attribute to two-way bind.
+  
+1. __key__ <code>{String}</code>:
+  The name of the property to two-way bind in the parent scope.
+  
+
+### <code>{child-prop}="key"</code>
+
+
+  Imports [can.stache.key] in the [can.view.Scope scope] to `childProp` in [can.Component::viewModel viewModel]. It also updates
+  `childProp` with the value of `key` when `key` changes.
+
+  ```
+  <my-component {some-prop}="value"/>
+  ```
+
+
+1. __child-prop__ <code>{String}</code>:
+  The name of the property to set in the 
+  component's viewmodel.
+  
+1. __key__ <code>{can.stache.expressions}</code>:
+  A KeyLookup or Call expression whose value
+  is used to set as `childProp`. 
+  
+
+### <code>{$child-prop}="key"</code>
+
+
+  Imports [can.stache.key] in the [can.view.Scope scope] to `childProp` property or attribute on the element. 
+
+  ```
+  <input {$value}="name"/>
+  ```
+
+  This signature works, but the following should be used instead:
+  
+  ```
+  <input value="{{name}}"/>
+  ```
+
+
+### <code>{^child-prop}="key"</code>
+
+
+Exports `childProp` in the [can.Component::viewModel viewModel] to [can.stache.key] in the parent [can.view.Scope scope]. It also updates
+`key` with the value of `childProp` when `childProp` changes.
+
 ```
+<my-component {^some-prop}="value"/>
+```
 
-## AMD use
 
-Configure the `can` and `jquery` paths and the `can-stache-bindings` package:
+1. __child-prop__ <code>{String}</code>:
+  The name of the property to export from the 
+  child components viewmodel. Use `{^this}` or `{^.}` to export the entire viewModel.
+  
+1. __key__ <code>{String}</code>:
+  The name of the property to set in the parent scope.
+  
 
-```html
-<script src="require.js"></script>
-<script>
-	require.config({
-	    paths: {
-	        "jquery": "node_modules/jquery/dist/jquery",
-	        "can": "node_modules/canjs/dist/amd/can"
-	    },
-	    packages: [{
-		    	name: 'can-stache-bindings',
-		    	location: 'node_modules/can-stache-bindings/dist/amd',
-		    	main: 'lib/can-stache-bindings'
-	    }]
-	});
-	require(["main-amd"], function(){});
-</script>
+### <code>{^$child-prop}="key"</code>
+
+
+  Exports the element's `childProp` property or attribute to [can.stache.key] in the parent [can.view.Scope scope]. It also updates
+  `key` with the value of `childProp` when `childProp` changes.
+
+  ```
+  <input {^$value}="name"/>
+  ```
+
+
+1. __child-prop__ <code>{String}</code>:
+  The name of the element's property or attribute to export.
+  
+1. __key__ <code>{String}</code>:
+  The name of the property to set in the parent scope.
+  
+  
+
+### <code>($DOM_EVENT)='CALL_EXPRESSION'</code>
+
+
+Specify a callback function to be called on a particular DOM event.
+
 ```
+<div ($click)="doSomething()"/>
+```
 
-### Standalone use
 
-Load the `global` version of the plugin:
+1. __DOM_EVENT__ <code>{String}</code>:
+  A DOM event name like "click". jQuery custom events can also
+  be given. 
+  
+1. __CALL_EXPRESSION__ <code>{can.stache.expressions}</code>:
+  A call expression like `method(key)` that is called when the `DOM_EVENT` 
+  is fired. The following key values are also supported:
+  
+   - `%element` - The element the event happened upon.
+   - `$element` - The [can.$] wrapped element the event happened upon.
+   - `%event` - The event object.
+   - `%viewModel` - If the element is a [can.Component], the component's [can.Component::viewModel viewModel].
+   - `%context` - The current context.
+   - `%scope` - The current [can.view.Scope].
+  
 
-```html
-<script src='./node_modules/can-stache-bindings/dist/global/can-stache-bindings.js'></script>
+### <code>(VIEW_MODEL_EVENT)='CALL_EXPRESSION'</code>
+
+
+Specify a callback function to be called on a particular [can.Component::viewModel viewModel] event.
+
 ```
+<my-component (show)="doSomething()"/>
+```
 
+
+1. __DOM_EVENT__ <code>{String}</code>:
+  A DOM event name like "click". jQuery custom events can also
+  be given. 
+  
+1. __CALL_EXPRESSION__ <code>{can.stache.expressions}</code>:
+  A call expression like `method(key)` that is called when the `DOM_EVENT` 
+  is fired. The following key values are also supported:
+  
+   - `%element` - The element the event happened upon.
+   - `$element` - The [can.$] wrapped element the event happened upon.
+   - `%event` - The event object.
+   - `%viewModel` - If the element is a [can.Component], the component's [can.Component::viewModel viewModel].
+   - `%context` - The current context.
+   - `%scope` - The current [can.view.Scope].
+  
+  
+
+### <code>*ref-prop</code>
+
+
+  A shorthand for exporting an element's viewModel to the reference scope.
+
+
+1. __ref-prop__ <code>{String}</code>:
+  The name of the property to set in the template's 'references' scope.
+  
 ## Contributing
@@ -58,0 +204,0 @@

New alerts

New author

Supply chain risk

A 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

Improved metrics

Total package byte prevSize

165055

increased by53.18%

Number of package files

52

increased by271.43%

Number of lines in readme file

221

increased by194.67%

Worsened metrics

Lines of code

2881

decreased by-0.17%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcan-observation@^3.0.0-pre.0

• - Removedcan-observe-info@^3.0.0-pre.5

• - Removedcan-observe-info@3.0.0(transitive)

• Updatedcan-compute@^3.0.0-pre.5

• Updatedcan-stache@^3.0.0-pre.8

• Updatedcan-view-callbacks@^3.0.0-pre.4

• Updatedcan-view-scope@^3.0.0-pre.7