Canjs 基础教程之技巧篇

Component

Template

Use the tag to position the custom element’s source HTML.

使用标签获取自定义标签元素的源HTML内容.

can.Component.extend({
tag: "hello-world",
template: "<h1><content/></h1>"
});

Html Template

<hello-world>Hi There</hello-world>

Html

<hello-world><h1>Hi There</h1></hello-world>

Using html attributes like can-EVENT-METHOD, you can directly call a scope method from a template

使用html属性类似can-click=’back’方式,可以在template中访问定义在scope中的back方法.

Template中使用{{}}访问scope中的属性或方法.

Scope

If you want to set the string value of the attribute on scope, give scope a default value of “@”.

默认使用’@’符号获取自定义标签的属性值

can.Component.extend({
tag: "hello-world",
template: "<h1>{{message}}</h1>",
scope: {
message: "@"
}
});

var template = can.mustache("<hello-world message='Howdy'/>");
template({})

<hello-world><h1>Howdy</h1></hello-world>

Scope也可以是一个function,但不常用.定义：function(attrs, parentScope, element)

attrs：custom element’s attributes（自定义标签元素的属性）

parentScope：（待理解）

element：自定义标签元素.

Events

A component’s events object is used as the prototype of a can.Control.

Component的Events对象被用作can.Control的原型属性.

The component’s scope is available within event handlers as this.scope.

在Events对象中使用this.scope.来访问Component的scope属性.

The events object can also listen to objects or properties on the component’s scope

Events对象同样可以监听Componet的scope对象的属性.

E.g.:监听scope的offset的属性变化，作相应的处理

can.Component.extend({
tag: "my-paginate",
template: "Page <span>1</span> <button class='next'>Next</button>",
scope: {
offset: 0,
page: function() {}
},
events: {
"{scope} offset": function() {
this.element.find("span").text(this.scope.page())
}
}
});

在Components的Event中可以绑定inserted 和removed事件,用于监听Component的Tag在页面中的插入和删除

Tag

Tag请用小写定义,大写时有时会有问题

Control

Creating a control instance：new can.Control( element, options )

var todosControl = new Todos( '#todos', {} );

element： is the NodeList consisting of the element the control is created on

options ：merged with the control’s static defaults property

Templated Event Handlers

Customize event handler behavior with “{NAME}” in the event handler name

自定义事件行为：在event定义中使用{Name}

var Todos = can.Control.extend({
init: function( element , options ) { ... },
'li click': function( li ) { ... },
'li .destroy {destroyEvent}': function( el, ev ) { ... }
});
// create Todos with this.options.destroyEvent
new Todos( '#todos', { destroyEvent: 'mouseenter' } );

Values inside {NAME} are looked up on the control’s this.options first, and then the window.

{Name}中的值首先在control的this.options中查找，之后是window

E.g.:所以上面的例子，我们让他从window中查找：

var Todos = can.Control.extend({
init: function( element , options ) { ... },
'li click': function( li ) { ... },
'li .destroy {Events.destroy}': function( el, ev ) { ... }
});
Events = { destroy: 'click' };
// Events.destroy is looked up on the window.
new Todos( '#todos' );

If the value inside {NAME} is an object, Control will bind to that object to listen for events.

如果{Name}中的值是一个Object,Control将对一个该对象bind监听对应事件

var Tooltip = can.Control.extend({
'{window} click': function( el, ev ) {
// hide only if we clicked outside the tooltip
if ( !this.element.has( ev.target ) ) {
this.element.remove();
}
}
});

Defaults

Default options provided for when a new control is created without values set in options

Default Options 在新建一个Control对象时提供属性的默认值.

Message = can.Control.extend({
defaults: {
message: "Hello World"
}
}, {
init: function(){
this.element.text( this.options.message );
}
});
new Message( "#el1" ); //writes "Hello World"
new Message( "#el12", { message: "hi" } ); //writes hi

Processors

can.Control already has processors for these events:

can.Control 可处理的事件如下：

change、click、contextmenu、dblclick、focusin、focusout、keydown、keyup、keypress、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup、reset、resize、scroll、select、submit

Route

Route events will be triggered whenever the route changes to the route part the control is listening to

当can.control监听的route部分的属性变动时将会触发route事件

var Router = can.Control({
init : function(el, options) {
},
":type route" : function(data) {
// the route says anything but todo
},
"todo/:id route" : function(data) {
// the route says todo/[id]
// data.id is the id or default value
},
"route" : function(data){
// the route is empty（route为空时触发）
}
});
new Router(window);

Options

The this.options property is an Object that contains configuration data passed to a control when it is created (new can.Control(element, options))

This.options属性是一个在control创建是传递control的配置数据的Object

请查看Default中的示例代码！

Setup

Element

Map

Backup

can.Map.backup is a plugin that provides a dirty bit for properties on an Map, and lets you restore the original values of an Map’s properties after they are changed

var recipe = new can.Map({
title: 'Pancake Mix',
yields: '3 batches',
ingredients: [{
ingredient: 'flour',
quantity: '6 cups'
},{
ingredient: 'baking soda',
quantity: '1 1/2 teaspoons'
},{
ingredient: 'baking powder',
quantity: '3 teaspoons'
},{
ingredient: 'salt',
quantity: '1 tablespoon'
},{
ingredient: 'sugar',
quantity: '2 tablespoons'
}]
});
recipe.backup();
recipe.attr('title', 'Flapjack Mix');
recipe.title;     // 'Flapjack Mix'
recipe.isDirty(); // true
recipe.restore();
recipe.title;     // 'Pancake Mix'

Validations

The can/map/validations plugin provides validations on maps

Contact = can.Map.extend({
init : function(){
// validates that birthday is in the future
this.validate("birthday",function(birthday){
if(birthday > new Date){
return "your birthday needs to be in the past"
}
})
}
},{});
var contact = new Contact({birthday: new Date(2012,0) })

Use errors ( [attrs…], newVal ) to read errors or to test if setting a value would create an error:

使用errors方法测试设置的值是否验证通过

Listen to changes in data

Use Model.bind(eventType, handler(event, model)) to listen to all events of type on a model and model.bind(eventType, handler(event)) to listen to events on a specific instance

使用Model.bind(eventType, handler(event, model))来监听某Model类型的事件，使用model.bind(eventType, handler(event))来监听摸model对象的的事件

一般有created、updated、destroyed三个事件

// listen for when any todo is created
Todo.bind('created', function( ev, todo ) {...})
// listen for when a specific todo is created
var todo = new Todo({name: 'do dishes'})
todo.bind('created', function( ev ) {...})

Property Changes

// listen for when the name property changes
todo.bind('name', function(ev){  })

Listening with can.Control

Todos = can.Control.extend({
"{Todo} updated" : function(Todo, ev, todo) {...}
})

Parse Model

can.Model.parseModel(data, xhr)

Expected data format： {id: 1, name : “dishes”},If your service returns data like

{ thingsToDo: {name: “dishes”, id: 5} }

假如使用findOne接受的数据是：{ thingsToDo: {name: “dishes”, id: 5} },而model对应期望的数据是{id: 1, name : “dishes”}时,可以使用如下方式处理

Task = can.Model.extend({
parseModel: function(data){
return data.thingsToDo;
}
},{});

或者使用

Task = can.Model.extend({
parseModel: "thingsToDo"
},{});

Fixture

(待续)

Mustache

Register Helpers

Eg:创建一个通用的Link

can.mustache.registerHelper('link', function(text, url) {
text = can.esc(text);
url  = can.esc(url);
var result = '<a href="' + url + '">' + text + '</a>';
return can.mustache.safeString(result);
});

Iteration

迭代一组字符串数组

Template:
{{#people}}
{{.}}
{{/people}}
Data:
{
people: ["Andy", "Austin", "Justin"]
}
Result:
Andy Austin Justin

{{@index}}

The template:
<ul>
{{#each items}}
<li> {{@index}} - {{.}} </li>
{{/each}}
</ul>
Rendered with:
{ items: ['Josh', 'Eli', 'David'] }
Renders:
<ul>
<li> 0 - Josh </li>
<li> 1 - Eli </li>
<li> 2 - David </li>
</ul>

{{@key}}

The template:
<ul>
{{#each person}}
<li> {{@key}}: {{.}} </li>
{{/each}}
</ul>
Rendered with:
{ person: {name: 'Josh', age: 27, likes: 'Mustache, JavaScript, High Fives'} }
Renders:
<ul>
<li> name: Josh </li>
<li> age: 27 </li>
<li> likes: Mustache, JavaScript, High Fives </li>
</ul>

(待续)