canjs基础教程之Components

Components

Component 可以很容易的结合observables，templates，controls的功能特性。

Tag

Tag：自定义定节点名称的Html元素，当自定义的tab标签在模板中出现时，就会在这个标签元素上创建一个Component实例
Eg:

1. can.Component.extend({
2. tag: "todos-editor"
3. })

 - var template = can.mustache("Here is my "+  - "<todos-editor>todos-editor element</todos-editor>")  -  - var frag = template();  - frag.childNodes[1].nodeName //-> "todos-editor element"

Template

• 模版内容会嵌入大定义的tag标签中.
• 模版可以访问ViewMode/Scope中的属性和方法

• 模版中使用<content>访问tag标签之间的html内容

  在ViewMode/Scope中定义一个和tag标签中同名的属性,使用@ 获取标签中的属性值

Scope

Scope:一个can.map对象，作用在template上，在template中可以访问scope中的属性
Scope bindings
在scope中添加模板上的事件处理，

1.  can.Component.extend({
2.    tag: "todos-editor",
3.    template: "<form can-click='toggle'>Editor: "+
4.                "{{#if visible}}<input type='text'/>{{/if}}"+
5.              "</form>",
6.    scope: {
7.      visible: true,
8.      toggle: function(context, el, ev){
9.        this.attr("visible", !this.attr("visible") )
10.     }
11.   }
12. })

Scope value functions
Scope中的带return的方法，可以在template中访问

1.  can.Component.extend({
2.    tag: "todos-editor",
3.    template: "<form can-click='toggle'>{{visibility}}: "+
4.                "{{#if visible}}<input type='text'/>{{/if}}"+
5.              "</form>",
6.    scope: {
7.      visible: true,
8.      toggle: function(context, el, ev){
9.        this.attr("visible", !this.attr("visible") )
10.     },
11.     visibility: function(){
12.       return this.attr("visible") ?
13.         "visible" : "invisible"
14.     }
15.   }
16. })

Passing values to a component’s scope
通过在Component的元素上设置属性，可以向Component传递Scope上的数据

var template = can.mustache("<h1>Todo: {{mytodo.name}}</h1>"+ "<todos-editor todo='mytodo'></todos-editor>") var mytodo = new can.Map({name: "Do the dishes"}) can.Component.extend({ tag: "todos-editor", template: "{{#if todo}}"+ "<input type='text' can-value='todo.name'/>"+ "{{/if}}", scope: {} }) var frag = template({ mytodo: mytodo }) document.body.appendChild(frag)

在Canjs3.0版本时 can.mustache使用 “@”访问tag中的属性值的方式 会在3.0版本中 修改成不需要”@” .

这里在说一下Mustache于stache的几个区别,

• mustache 访问tag的属性使用@,而stache不需要,直接就可以访问

In Mustache

can.Component.extend({
    tag: "demo ",
    viewModel: {
        oper:'@',
        something:'@',
        doSomething: function() {
            return this.attr("oper")+" "+this.attr("something");
        }
    },
    template: "Jack {{doSomething}}."
});
var template = can.mustache("<demo doing='driver' something='car'></my-paginate>");
$("body").append(template());

In Stache

can.Component.extend({
    tag: "demo ",
    viewModel: {
        doSomething: function() {
            return this.attr("oper")+" "+this.attr("something");
        }
    },
    template: "Jack {{doSomething}}."
});
var template = can.stache("<demo doing='driver' something='car'></my-paginate>");
$("body").append(template());

• Mustache访问tag中的属性引用不需要加上{}和stache中需要

In Mustache

can.Component.extend({
    tag: "demo ",
    viewModel: {
        doSomething: function() {
            return this.attr("doing")+" "+this.attr("something");
        }
    },
    template: "Jack {{doSomething}}."
});
var template = can.mustache("<demo doing='do' something='thing'></my-paginate>");
var pageInfo = new can.Map({do: "play ",thing: "cards"});
$("body").append(template(pageInfo));

In Stache

can.Component.extend({
    tag: "demo ",
    viewModel: {
        doSomething: function() {
            return this.attr("doing")+" "+this.attr("something");
        }
    },
    template: "Jack {{doSomething}}."
});
var template = can.mustache("<demo doing='{do}' something='{thing}'></my-paginate>");
var pageInfo = new can.Map({do: "play ",thing: "cards"});
$("body").append(template(pageInfo));

Helpers

Events