New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

can-view-callbacks

Package Overview
Dependencies
Maintainers
3
Versions
64
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

can-view-callbacks - npm Package Compare versions

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

127

docs/attr.md
@function can-view-callbacks.attr attr
@parent can-view-callbacks/methods

@@ -7,6 +8,9 @@ Register custom behavior for an attribute.

Registers the `attrHandler` callback when `attributeName` is found
in a template.
```js
var callbacks = require("can-view-callbacks");
var canViewCallbacks = require("can-view-callbacks");
callbacks.attr("show-when", function(el, attrData){
canViewCallbacks.attr("show-when", function(el, attrData){
var prop = el.getAttribute("show-when");

@@ -24,8 +28,8 @@ var compute = attrData.compute(prop);

compute.bind("change", showOrHide);
compute.on("change", showOrHide);
showOrHide();
el.addEventListener("removed", function onremove(){
compute.unbind("change", showOrHide);
el.removeEventListener("removed", onremove);
domEvents.addEventListener.call( el, "removed", function onremove(){
compute.off("change", showOrHide);
domEvents.removeEventListener.call("removed", onremove);
});

@@ -35,6 +39,3 @@ });

@release 2.1
Registers the `attrHandler` callback when `attributeName` is found
in a template.

@@ -44,4 +45,3 @@ @param {String|RegExp} attributeName A lower-case attribute name or regular expression

@param {function(HTMLElement,can.view.attrData)} attrHandler(el, attrData)
@param {function(HTMLElement,can-view-callbacks.attrData)} attrHandler(el, attrData)
A function that adds custom behavior to `el`.

@@ -53,11 +53,11 @@

`can.view.attr` is used to add custom behavior to elements that contain a
specified html attribute. Typically it is used to mixin behavior (whereas
[can.view.tag] is used to define behavior).
`canViewCallbacks.attr` is used to add custom behavior to elements that contain a
specified html attribute. Typically it is used to mixin behavior (whereas
[can-view-callbacks.tag] is used to define behavior).
The following example adds a jQueryUI tooltip to any element that has
The following example adds a jQueryUI tooltip to any element that has
a `tooltip` attribute like `<div tooltip="Click to edit">Name</div>`.
@demo can/view/doc/tooltip.html
@demo demos/can-view-callbacks/tooltip.html

@@ -77,3 +77,3 @@ ## Listening to attribute changes

deleteTooltip: function(){
var selectedCount = selected.attr("length");
var selectedCount = selected.length;
if(selectedCount) {

@@ -87,24 +87,25 @@ return "Delete "+selectedCount+" users";

The [can.events.attributes attributes] event can be used to listen to when
The [can-util/dom/events/attributes/attributes attributes] event can be used to listen to when
the toolip attribute changes its value like:
```js
canViewCallbacks.attr("tooltip", function( el, attrData ) {
// A helper that updates or sets up the tooltip
var updateTooltip = function(){
$(el).tooltip({
content: el.getAttribute("tooltip"),
items: "[tooltip]"
})
}
// When the tooltip attribute changes, update the tooltip
domEvents.addEventListener.call(el, "attributes", function(ev){
if(ev.attributeName === "tooltip") {
updateTooltip();
}
});
// Setup the tooltip
updateTooltip();
can.view.attr("tooltip", function( el, attrData ) {
var updateTooltip = function(){
$(el).tooltip({
content: el.getAttribute("tooltip"),
items: "[tooltip]"
});
};
$(el).bind("attributes", function(ev){
if(ev.attributeName === "tooltip") {
updateTooltip();
}
});
updateTooltip();
})
});
```

@@ -114,3 +115,3 @@ To see this behavior in the following demo, hover the mouse over the "Delete" button. Then

@demo can/view/doc/dynamic_tooltip.html
@demo demos/can-view-callbacks/dynamic_tooltip.html

@@ -122,3 +123,3 @@

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:

@@ -131,12 +132,12 @@

</div>
These values can be read from [can.view.attrData attrData]'s scope like:
These values can be read from [can-view-callbacks.attrData]'s scope like:
attrData.scope.attr("showing")
But often, you want to update scope value or listen when the scope value
But often, you want to update scope value or listen when the scope value
changes. For example, the __toggle__ mixin might want to update `showing`
and the __fade-in-when__ mixin needs to know when
the `showing` changes. Both of these can be achived by
using [can.view.Scope::compute compute] to get a get/set compute that is
and the __fade-in-when__ mixin needs to know when
the `showing` changes. Both of these can be achived by
using [can-view-scope::compute compute] to get a get/set compute that is
tied to the value in the scope:

@@ -149,11 +150,11 @@

can.view.attr("toggle", function(el, attrData){
canViewCallbacks.attr("toggle", function(el, attrData){
var attrValue = el.getAttribute("toggle")
toggleCompute = attrData.scope.compute(attrValue);
$(el).click(function(){
toggleCompute(! toggleCompute() )
})
})

@@ -163,3 +164,3 @@

can.view.attr("fade-in-when", function( el, attrData ) {
canViewCallbacks.attr("fade-in-when", function( el, attrData ) {
var attrValue = el.getAttribute("fade-in-when");

@@ -175,26 +176,26 @@ fadeInCompute = attrData.scope.compute(attrValue),

fadeInCompute.bind("change",handler);
fadeInCompute.on("change",handler);
...
})
});
When you listen to something other than the attribute's element, remember to
unbind the event handler when the element is [can.events.removed removed] from the page:
unbind the event handler when the element is [can-util/dom/events/removed/removed removed] from the page:
$(el).bind("removed", function(){
fadeInCompute.unbind(handler);
});
```js
domEvents.addEventListener.call(el,"removed", function(){
fadeInCompute.off(handler);
});
```
@demo can/view/doc/fade_in_when.html
@demo demos/can-view-callbacks/fade_in_when.html
## When to call
`can.view.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_), `can.view.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.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.
//Call can.view.attr first
can.view.attr('tooltip', tooltipFunction);
//Call canViewCallbacks.attr first
canViewCallbacks.attr('tooltip', tooltipFunction);
//Preload a template for rendering
var renderer = can.view('app-template');
//No calls to can.view.attr after this will be used by `renderer`
var renderer = stache("<div tooltip='Hi There'>...</div>");
//No calls to canViewCallbacks.attr after this will be used by `renderer`

30

docs/attrData.md

@@ -1,9 +0,27 @@

@typedef {{}} can-view-callbacks.attrData attrData
@typedef {Object} can-view-callbacks.attrData attrData
@parent can-view-callbacks/types
The data provided to [can.view-callbacks.attr].
@option {can-view-scope} scope The scope of the element.
The data provided to [can-view-callbacks.attr].
@option {can.view.Options} options The mustache helpers and other non-data values passed to the template.
@type {Object}
@option {String} attributeName The attribute name that was matched.
```js
var canViewCallbacks = require("can-view-callbacks");
var stache = require("can-stache");
canViewCallbacks.attr("my-attr", function(el, attrData){
attrData.scope.peak("value") //-> 123
attrData.attributeName //-> "my-attr"
});
stache("<div my-attr='value'/>")({
value: 123
});
```
@option {can-view-scope} scope The scope of the element.
@option {can-view-scope.Options} options The mustache helpers and other non-data values passed to the template.
@option {String} attributeName The attribute name that was matched.

4

docs/can-view-callbacks.md
@module {{}} can-view-callbacks can-view-callbacks
@parent can-infrastructure
@group can-view-callbacks/methods methods
@group can-view-callbacks/types types
@description Registered callbacks for behaviors

@@ -4,0 +8,0 @@

87

docs/tag.md
@function can-view-callbacks.tag tag
@parent can-view-callbacks/methods
@signature `callbacks.tag(tagName, tagHandler(el, tagData))`
Registers the `tagHandler` callback when `tagName` is found
in a template.
Registers the `tagHandler` callback when `tagName` is found
in a template.

@@ -10,5 +12,5 @@ ```js

require("jquery-datepicker");
var callbacks = require("can-view-callbacks");
var canViewCallbacks = require("can-view-callbacks");
callbacks.tag("date-picker", function(el){
canViewCallbacks.tag("date-picker", function(el, tagData){
$(el).datePicker();

@@ -20,9 +22,9 @@ });

@param {String} tagName A lower-case, hypenated or colon-seperated html
tag. Example: `"my-widget"` or `"my:widget"`. It is considered a best-practice to
@param {String} tagName A lower-case, hypenated or colon-seperated 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.
@param {function(HTMLElement,can.view.tagData):can.view.Scope} tagHandler(el, tagData)
@param {function(HTMLElement,can.view.tagData):can.view.Scope} tagHandler(el, tagData)
Adds custom behavior to `el`. If `tagHandler` returns data, it is used to
Adds custom behavior to `el`. If `tagHandler` returns data, it is used to
render `tagData.subtemplate` and the result is inserted as the childNodes of `el`.

@@ -34,8 +36,3 @@

Check out this video where we talk about different possiblities to use callbacks.tag:
<iframe width="662" height="372" src="https://www.youtube.com/embed/ahjd5OQcs7c" frameborder="0" allowfullscreen></iframe>
`callbacks.tag` is a low-level way to add custom behavior to custom elements. Often, you
`canViewCallbacks.tag` is a low-level way to add custom behavior to custom elements. Often, you
want to do this with [can-component]. However, [can-view-callbacks.tag callbacks.tag] is

@@ -51,5 +48,5 @@ useful for when [can-component] might be considered overkill. For example, the

The `tagHandler`'s [can.view.tagData tagData] argument is an object
that contains the mustache [can.view.Scope scope] and helper [can.view.Options options]
where `el` is found and a [can.view.renderer subtemplate] that renders the contents of the
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
template within the custom tag.

@@ -63,3 +60,3 @@

callbacks.tag("jqui-datepicker", function(el, tagData){
$(el).datepicker({format: tagData.scope.attr("format")})
$(el).datepicker({format: tagData.scope.get("format")})
})

@@ -69,8 +66,8 @@

template({format: "mm/dd/yy"})
`tagData.options` contains the helpers and partials provided
`tagData.options` contains the helpers and partials provided
to the template. A helper function might need to be called to get the current value of format like:
callbacks.tag("jqui-datepicker", function(el, tagData){
$(el).datepicker({format: tagData.options.attr("helpers.format")()})
$(el).datepicker({format: tagData.options.get("helpers.format")()})
})

@@ -93,4 +90,4 @@

You want to update the datepicker if `format` changes. The easist way to do this
is to use [can.view.Scope Scope's compute] method which returns a get-set
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
compute that is tied to a key value:

@@ -100,3 +97,3 @@

callbacks.tag("jqui-datepicker", function(el, tagData){
var formatCompute = tagData.scope.compute("format"),

@@ -106,9 +103,9 @@ changeHandler = function(ev, newVal){

}
formatCompute.bind("change",changeHandler)
changeHandler({}, formatCompute());
...
...
})

@@ -120,7 +117,8 @@

If you listen on something outside the tag, it's a good practice to stop listening
when the element is [can.events.removed removed] from the page:
when the element is [can-util/dom/events/removed/removed removed] from the page:
$(el).bind("removed", function(){
formatCompute.unbind("change",changeHandler)
})
domEvents.addEventListener.call( el, "removed", function onremove(){
compute.off("change", showOrHide);
formatCompute.unbind("change",changeHandler)
});

@@ -132,3 +130,3 @@

var template = mustache(
var template = stache(
"<my-form>\

@@ -139,3 +137,3 @@ <input value="{{first}}"/>\

A seperate template function is compiled and passed
A separate template function is compiled and passed
as `tagData.subtemplate`. That subtemplate can

@@ -148,13 +146,13 @@ be rendered with custom data and options. For example:

}, tagData.options)
$(el).html( frag )
})
template({
last: "Meyer"
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 add] to
include the original data in the subtemplate's scope, [can-view-scope::add] to
the old scope like:

@@ -164,11 +162,10 @@

var frag = tagData.subtemplate(
tagData.scope.add({ first: "Justin" }),
tagData.scope.add({ first: "Justin" }),
tagData.options)
$(el).html( frag )
})
template({
last: "Meyer"
last: "Meyer"
})

24

docs/tagData.md

@@ -1,16 +0,20 @@

@typedef {{}} can-view-callbacks.tagData tagData
@typedef {Object} can-view-callbacks.tagData tagData
@parent can-view-callbacks/types
The data passed to [can-view-callbacks.tag].
@type {Object}
@option {can.view.renderer} [subtemplate] If the special tag has content,
the content can be rendered with subtemplate. For example:
@option {can-stache.renderer} [subtemplate] If the special tag has content,
the content can be rendered with subtemplate. For example:
callbacks.tag("foo-bar", function(el, tagData){
var frag = tagData.subtemplate(tagData.scope, tagData.options);
$(el).html(frag);
})
@option {can-view-scope} scope The scope of the element.
```js
callbacks.tag("foo-bar", function(el, tagData){
var frag = tagData.subtemplate(tagData.scope, tagData.options);
$(el).html(frag);
});
```
@option {can.view.Options} options The mustache helpers and other non-data values passed to the template.
@option {can-view-scope} scope The scope of the element.
@option {can-view-scope.Options} options The mustache helpers and other non-data values passed to the template.

2

package.json
{
"name": "can-view-callbacks",
"version": "3.0.0-pre.6",
"version": "3.0.0-pre.7",
"description": "Registered callbacks for behaviors",

@@ -5,0 +5,0 @@ "homepage": "http://canjs.com",

doc/GREADME.md
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc