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

can-view-callbacks

Package Overview
Dependencies
Maintainers
8
Versions
64
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

can-view-callbacks - npm Package Compare versions

Comparing version 3.2.3 to 3.2.4

110

docs/attr.md

@@ -68,20 +68,23 @@ @function can-view-callbacks.attr attr

<button tooltip="{{deleteTooltip}}">
Delete
</button>
```html
<button tooltip="{{deleteTooltip()}}">
Delete
</button>
```
Where `deleteTooltip` changes depending on how many users are selected:
Where `deleteTooltip()` changes depending on how many users are selected:
deleteTooltip: function(){
var selectedCount = selected.length;
if(selectedCount) {
return "Delete "+selectedCount+" users";
} else {
return "Select users to delete them.";
}
}
```js
deleteTooltip: function(){
var selectedCount = selected.length
if(selectedCount) {
return "Delete "+selectedCount+" users";
} else {
return "Select users to delete them.";
}
},
```
The [can-util/dom/events/attributes/attributes attributes] event can be used to listen to when
the toolip attribute changes its value like:
the tooltip attribute changes its value like:

@@ -122,11 +125,15 @@ ```js

<button toggle="showing">
{{#showing}}Show{{else}}Hide{{/showing}} more info</button>
<div fade-in-when="showing">
Here is more info!
</div>
```html
<button toggle="showing">
{{#if(showing)}}Hide{{else}}Show{{/if}} more info</button>
<div fade-in-when="showing">
Here is more info!
</div>
```
These values can be read from [can-view-callbacks.attrData]'s scope like:
attrData.scope.attr("showing")
```js
attrData.scope.attr("showing")
```

@@ -140,36 +147,43 @@ But often, you want to update scope value or listen when the scope value

var showing = attrData.scope.compute("showing")
```js
var showing = attrData.scope.compute("showing")
```
This value can be written to by `toggle`:
```js
canViewCallbacks.attr("toggle", function(el, attrData){
canViewCallbacks.attr("toggle", function(el, attrData){
var attrValue = el.getAttribute("toggle")
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() )
})
})
```
})
Or listened to by `fade-in-when`:
canViewCallbacks.attr("fade-in-when", function( el, attrData ) {
var attrValue = el.getAttribute("fade-in-when");
fadeInCompute = attrData.scope.compute(attrValue),
handler = function(ev, newVal, oldVal){
if(newVal && !oldVal) {
$(el).fadeIn("slow")
} else if(!newVal){
$(el).hide()
}
}
```js
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()
}
}
fadeInCompute.on("change",handler);
fadeInCompute.on("change",handler);
...
});
...
})
```
When you listen to something other than the attribute's element, remember to

@@ -190,6 +204,8 @@ unbind the event handler when the element is [can-util/dom/events/removed/removed removed] from the page:

//Call canViewCallbacks.attr first
canViewCallbacks.attr('tooltip', tooltipFunction);
//Preload a template for rendering
var renderer = stache("<div tooltip='Hi There'>...</div>");
//No calls to canViewCallbacks.attr after this will be used by `renderer`
```js
//Call canViewCallbacks.attr first
canViewCallbacks.attr('tooltip', tooltipFunction);
//Preload a template for rendering
var renderer = stache("<div tooltip='Hi There'>...</div>");
//No calls to canViewCallbacks.attr after this will be used by `renderer`
```
{
"name": "can-view-callbacks",
"version": "3.2.3",
"version": "3.2.4",
"description": "Registered callbacks for behaviors",

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

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc