type
Converts a value passed to attr into an appropriate value.
Use
The type
property specifies the type of the attribute. The type can be specified
as either a type function that returns the type coerced value or one of the following strings:
"string"
- Converts the value to a string exceptnull
orundefined
."date"
- Converts the value to a date ornull
if the date can not be converted."number"
- Passes the value throughparseFloat
except fornull
orundefined
."boolean"
- Converts falsey,"false"
or"0"
tofalse
and everything else to true."htmlbool"
- Likeboolean
, but also converts empty strings totrue
. Used, for example, when input is from component attributes like<can-tabs reverse/>
"compute"
- If the value set is a compute, will allow the returning of the computed value."*"
- Prevents the default type coersion of converting Objects to Maps and Arrays to Lists.
Basic Example
The following example converts the count
property to a number and the items
property to an array:
define: {
count: {type: "number"},
items: {
type: function(newValue){
if(typeof newValue === "string") {
return newValue.split(",")
} else if( Array.isArray(newValue) ) {
return newValue;
}
}
}
}
When a user tries to set those properties like:
map.attr({count: "4", items: "1,2,3"});
The number converter will be used to turn count into 4, and the items type converter function will be used to turn items into [1,2,3].
Preventing Arrays and Objects from Automatic Conversion
When an array is passed into a Map setter, it is automatically converted into a List. Likewise, objects are converted into Map instances. This behavior can be prevented like the following:
define: {
locations: {type: "*"}
}
When a user tries to set this property, the resulting value will remain an array.
map.attr('locations', [1, 2, 3]); // locations is an array, not a List
Working with the 'compute' type
Setting type as compute
allows for resolving a computed property with the .attr()
method.
MyMap = Map.extend({
define: {
value: {
type: "compute"
}
}
});
var myMap = new MyMap();
var c = compute(5);
myMap.attr("value",c);
myMap.attr("value"); //-> 5
c(6);
myMap.attr("value"); //-> 6
//Be sure if setting to pass the new compute
var c2 = compute("a");
myMap.attr("value",c2);
myMap.attr("value"); //-> "a"