can-view-callbacks - npm Package Compare versions

Comparing version 4.0.0-pre.6 to 4.0.0-pre.7

docs/attr.md

@@ -15,2 +15,3 @@ @function can-view-callbacks.attr attr
 var canViewCallbacks = require("can-view-callbacks");
+var domEvents = require("can-util/dom/events/events");
 
@@ -66,3 +67,3 @@ canViewCallbacks.attr("show-when", function(el, attrData){
 In the previous example, the content of the tooltip was static. However,
-it's likely that the tooltip's value might change. For instance, the template
+it’s likely that the tooltip’s value might change. For instance, the template
 might want to dynamically update the tooltip like:
@@ -113,4 +114,4 @@
 
-To see this behavior in the following demo, hover the mouse over the "Delete" button.  Then
-select some users and hover over the "Delete" button again:
+To see this behavior in the following demo, hover the mouse over the “Delete”
+button. Then select some users and hover over the “Delete” button again:
 
@@ -122,5 +123,5 @@ @demo demos/can-view-callbacks/dynamic_tooltip.html
 
-It's common that attribute mixins need complex, observable data to
+It’s common that attribute mixins need complex, observable data to
 perform rich behavior. The attribute mixin is able to read
-data from the element's [can.view.Scope scope]. For example,
+data from the element’s [can-view-scope scope]. For example,
 __toggle__ and __fade-in-when__ will need the value of `showing` in:
@@ -130,3 +131,4 @@
 <button toggle="showing">
-	{{#if(showing)}}Hide{{else}}Show{{/if}} more info</button>
+	{{#if(showing)}}Hide{{else}}Show{{/if}} more info
+</button>
 <div fade-in-when="showing">
@@ -137,3 +139,3 @@ Here is more info!
 
-These values can be read from [can-view-callbacks.attrData]'s scope like:
+These values can be read from [can-view-callbacks.attrData]’s scope like:
 
@@ -147,3 +149,3 @@ ```js
 and the __fade-in-when__ mixin needs to know when
-the `showing` changes.  Both of these can be achived by
+the `showing` changes.  Both of these can be achieved by
 using [can-view-scope::compute compute] to get a get/set compute that is
@@ -159,12 +161,10 @@ tied to the value in the scope:
 ```js
-canViewCallbacks.attr("toggle", function(el, attrData){
+canViewCallbacks.attr("toggle", function(el, attrData) {
+	var attrValue = el.getAttribute("toggle");
+	var toggleCompute = attrData.scope.compute(attrValue);
 
-	var attrValue = el.getAttribute("toggle")
-		toggleCompute = attrData.scope.compute(attrValue);
-
-	$(el).click(function(){
-		toggleCompute(! toggleCompute() )
-	})
-
-})
+	$(el).click(function() {
+		toggleCompute( ! toggleCompute() );
+	});
+});
 ```
@@ -175,28 +175,29 @@
 ```js
-canViewCallbacks.attr("fade-in-when", function( el, attrData ) {
+canViewCallbacks.attr("fade-in-when", function(el, attrData) {
 	var attrValue = el.getAttribute("fade-in-when");
-		fadeInCompute = attrData.scope.compute(attrValue),
-		// handler for when the compute changes
-		handler = function(ev, newVal, oldVal){
-			if(newVal && !oldVal) {
-				$(el).fadeIn("slow")
-			} else if(!newVal){
-				$(el).hide()
-			}
+	var fadeInCompute = attrData.scope.compute(attrValue);
+
+	// handler for when the observable changes
+	var handler = function(event, newVal, oldVal) {
+		if (newVal && !oldVal) {
+			$(el).fadeIn("slow")
+		} else if (!newVal) {
+			$(el).hide()
 		}
+	};
 
-	fadeInCompute.on("change",handler);
+	fadeInCompute.on("change", handler);
 
 	...
 
-})
+});
 ```
 
-When you listen to something other than the attribute's element, remember to
+When you listen to something other than the attribute’s element, remember to
 unbind the event handler when the element is [can-util/dom/events/removed/removed removed] from the page:
 
 ```js
-domEvents.addEventListener.call(el,"removed", function(){
-	fadeInCompute.off(handler);
-});
+	domEvents.addEventListener.call(el, "removed", function() {
+		fadeInCompute.off("change", handler);
+	});
 ```
@@ -208,3 +209,5 @@
 
-`canViewCallbacks.attr` must be called before a template is processed. When [using `can.view` to create a renderer function](http://canjs.com/docs/can.view.html#sig_can_view_idOrUrl_), `canViewCallbacks.attr` must be called before the template is loaded, not simply before it is rendered.
+`canViewCallbacks.attr` must be called before a template is processed. When
+using [can-stache] to create a renderer function, `canViewCallbacks.attr` must
+be called before the template is loaded, not simply before it is rendered.
 
@@ -211,0 +214,0 @@ ```js

docs/attrData.md

@@ -13,3 +13,3 @@ @typedef {Object} can-view-callbacks.attrData attrData
   canViewCallbacks.attr("my-attr", function(el, attrData){
-    attrData.scope.peak("value") //-> 123
+    attrData.scope.peek("value") //-> 123
 	attrData.attributeName       //-> "my-attr"
@@ -16,0 +16,0 @@

docs/tag.md

@@ -14,3 +14,3 @@ @function can-view-callbacks.tag tag
 
-canViewCallbacks.tag("date-picker", function(el, tagData){
+canViewCallbacks.tag("date-picker", function(el, tagData) {
 	$(el).datePicker();
@@ -22,7 +22,7 @@ });
 
-@param {String} tagName A lower-case, hypenated or colon-seperated html
+@param {String} tagName A lower-case, hyphenated or colon-separated html
 tag. Example: `"my-widget"` or `"my:widget"`.  It is considered a best-practice to
-have a hypen or colon in all custom-tag names.
+have a hyphen or colon in all custom-tag names.
 
-@param {function(HTMLElement,can.view.tagData):can.view.Scope} tagHandler(el, tagData)
+@param {function(HTMLElement,can-view-callbacks.tagData):can-view-scope} tagHandler(el, tagData)
 
@@ -39,13 +39,14 @@ Adds custom behavior to `el`.  If `tagHandler` returns data, it is used to
 useful for when [can-component] might be considered overkill.  For example, the
-following creates a [jQueryUI DatePicker](http://api.jqueryui.com/datepicker/) everytime a
+following creates a [jQueryUI DatePicker](https://api.jqueryui.com/datepicker/) every time a
 `<jqui-datepicker>` element is found:
 
-    callbacks.tag("jqui-datepicker", function(el, tagData){
-      $(el).datepicker()
-    })
+```js
+callbacks.tag("jqui-datepicker", function(el, tagData) {
+  $(el).datepicker();
+});
+```
 
-
-The `tagHandler`'s [can-view-callbacks.tagData] argument is an object
+The `tagHandler`’s [can-view-callbacks.tagData] argument is an object
 that contains the stache [can-view-scope Scope] and helper [can-view-scope.Options]
-where `el` is found and a [can-stache.renderer subtemplate] that renders the contents of the
+where `el` is found and a [can-stache.renderer sub-template] that renders the contents of the
 template within the custom tag.
@@ -58,8 +59,10 @@
 
-    callbacks.tag("jqui-datepicker", function(el, tagData){
-      $(el).datepicker({format: tagData.scope.get("format")})
-    })
+```js
+callbacks.tag("jqui-datepicker", function(el, tagData) {
+  $(el).datepicker({format: tagData.scope.get("format")});
+});
 
-    var template = mustache("<jqui-datepicker></jqui-datepicker>")
-    template({format: "mm/dd/yy"})
+var template = mustache("<jqui-datepicker></jqui-datepicker>");
+template({format: "mm/dd/yy"});
+```
 
@@ -69,10 +72,14 @@ `tagData.options` contains the helpers and partials provided
 
-    callbacks.tag("jqui-datepicker", function(el, tagData){
-      $(el).datepicker({format: tagData.options.get("helpers.format")()})
-    })
+```js
+callbacks.tag("jqui-datepicker", function(el, tagData) {
+  $(el).datepicker({
+		format: tagData.options.get("helpers.format")()
+	});
+});
 
-    var template = mustache("<jqui-datepicker></jqui-datepicker>")
-    template({},{format: function(){
-      return "mm/dd/yy"
-    }})
+var template = mustache("<jqui-datepicker></jqui-datepicker>");
+template({},{format: function() {
+  return "mm/dd/yy";
+}});
+```
 
@@ -82,41 +89,45 @@ ## Responding to changing data
 Often, data passed to a template is observable.  If you use [can-view-callbacks.tag], you must
-listen and respond to chagnes yourself.  Consider if format is property on a
-`settings` [can.Map] like:
+listen and respond to changes yourself.  Consider if format is property on a
+`settings` [can-map] like:
 
-    var settings = new Map({
-      format: "mm/dd/yy"
-    })
+```js
+var settings = new Map({
+  format: "mm/dd/yy"
+});
+```
 
 You want to update the datepicker if `format` changes.  The easiest way to do this
-is to use [can-view-scope::compute Scope's compute] method which returns a get-set
+is to use [can-view-scope::compute Scope’s compute] method which returns a get-set
 compute that is tied to a key value:
 
+```js
+callbacks.tag("jqui-datepicker", function(el, tagData) {
 
-    callbacks.tag("jqui-datepicker", function(el, tagData){
+  var formatCompute = tagData.scope.compute("format");
+	var changeHandler = function(ev, newVal) {
+    $(el).datepicker("option", "format", newVal);
+  };
 
-      var formatCompute = tagData.scope.compute("format"),
-          changeHandler = function(ev, newVal){
-            $(el).datepicker("option","format", newVal});
-          }
+  formatCompute.bind("change",changeHandler);
 
-      formatCompute.bind("change",changeHandler)
+  changeHandler({}, formatCompute());
 
-      changeHandler({}, formatCompute());
+  ...
 
-      ...
+})
 
-    })
+var template = mustache("<jqui-datepicker/>");
+template(settings);
+```
 
-    var template = mustache("<jqui-datepicker/>")
-    template(settings)
-
-If you listen on something outside the tag, it's a good practice to stop listening
+If you listen on something outside the tag, it’s a good practice to stop listening
 when the element is [can-util/dom/events/removed/removed removed] from the page:
 
-	domEvents.addEventListener.call( el, "removed", function onremove(){
-		compute.off("change", showOrHide);
-		formatCompute.unbind("change",changeHandler)
-	});
+```js
+domEvents.addEventListener.call( el, "removed", function onremove() {
+	compute.off("change", showOrHide);
+	formatCompute.unbind("change",changeHandler);
+});
+```
 
-
 ## Subtemplate
@@ -126,39 +137,45 @@
 
-    var template = stache(
-      "<my-form>\
-         <input value="{{first}}"/>\
-         <input value="{{last}}"/>\
-       </my-form>")
+```js
+var template = stache(
+  "<my-form>\
+     <input value="{{first}}"/>\
+     <input value="{{last}}"/>\
+   </my-form>");
+```
 
 A separate template function is compiled and passed
-as `tagData.subtemplate`.  That subtemplate can
+as `tagData.subtemplate`.  That sub-template can
 be rendered with custom data and options. For example:
 
-    callbacks.tag("my-form", function(el, tagData){
-       var frag = tagData.subtemplate({
-         first: "Justin"
-       }, tagData.options)
+```js
+callbacks.tag("my-form", function(el, tagData) {
+   var frag = tagData.subtemplate({
+     first: "Justin"
+   }, tagData.options);
 
-       $(el).html( frag )
-    })
+   $(el).html( frag );
+});
 
-    template({
-      last: "Meyer"
-    })
+template({
+  last: "Meyer"
+});
+```
 
-
 In this case, the sub-template will not get a value for `last`.  To
-include the original data in the subtemplate's scope, [can-view-scope::add] to
+include the original data in the sub-template’s scope, [can-view-scope::add] to
 the old scope like:
 
-    callbacks.tag("my-form", function(el, tagData){
-       var frag = tagData.subtemplate(
-         tagData.scope.add({ first: "Justin" }),
-         tagData.options)
+```js
+callbacks.tag("my-form", function(el, tagData) {
+   var frag = tagData.subtemplate(
+     tagData.scope.add({ first: "Justin" }),
+     tagData.options
+	 );
 
-       $(el).html( frag )
-    })
+   $(el).html( frag );
+})
 
-    template({
-      last: "Meyer"
-    })
+template({
+  last: "Meyer"
+});
+```

docs/tagData.md

@@ -9,6 +9,6 @@ @typedef {Object} can-view-callbacks.tagData tagData
   @option {can-stache.renderer} [subtemplate] If the special tag has content,
-  the content can be rendered with subtemplate.  For example:
+  the content can be rendered with sub-template.  For example:
 
   ```js
-  callbacks.tag("foo-bar", function(el, tagData){
+  callbacks.tag("foo-bar", function(el, tagData) {
     var frag = tagData.subtemplate(tagData.scope, tagData.options);
@@ -15,0 +15,0 @@ $(el).html(frag);

package.json

 {
   "name": "can-view-callbacks",
-  "version": "4.0.0-pre.6",
+  "version": "4.0.0-pre.7",
   "description": "Registered callbacks for behaviors",
@@ -5,0 +5,0 @@ "homepage": "https://canjs.com/doc/can-view-callbacks.html",

No alert changes

Worsened metrics

Total package byte prevSize

31974

decreased by-0.04%

No dependency changes