CanJS

Posted on August 30, 2015


can.Construct

类定义:

  • can.Construct.extend({实例属性方法})
  • can.Construct.extend({类属性方法}, {})
  • can.Construct.extend({类属性方法}, {实例属性方法})

  • 实例方法中this代表对象本身
  • 可选实例方法init, 作为需要初始化参数的构造函数

类继承:

  • Child = Parent(…)
  • 支持方法覆盖
  • 在子类实例方法中, this._super代表父类中同名方法

对象获得所属类:

  • object.constructor

can.Observe

初始化观察者:

  • var observe = new can.Observe({初始属性})
  • var observe = new can.Observe.List([初始列表])

观察者绑定事件(监控属性变化):

  • observe.bind(‘someAttr’, function(evt, new, old) … )
  • observe.bind(‘add’, function(evt, new, index) … )
  • observe.bind(‘change’, function(evt, attr, how, new, old)) //观察所有属性变化

给观察者发送消息(修改观察者的属性):

  • observe.attr(‘someAttr’, newValue)
  • observe.push(45) //list

can.Model

 var Bookmark = can.Model.extend({
   findAll: "GET /bookmarks",
   create: "POST /bookmarks",
   update: "PUT /bookmarks/{id}",
   destroy: "DELETE /bookmarks/{id}",
 }, {
 });

Model 的作用:

  • 将声明的类方法映射为与后端程序交互的http API, API格式:

    • 方法名: “http动词 URI”
    • URI中{attrName}代表对象的属性
  • 解析服务器的响应


can.view

可以渲染EJS或者Mustache (前端会发送ajax去后端获得模板文件, 前端进行模板解析和渲染)

  • $(‘htmltarget’).html(‘/api/for/template’, viewModel)

动态绑定

数据(Observe)的变化, 会导致已经渲染的html的变化

// 'bookmarks' is now a list of observes
var bookmarks = new can.Observe.List([
  {url:"http://one.com", title:"One"},
  {url:"http://two.com", title:"Two"}
]);
var viewModel = {bookmarks:bookmarks};
$("#target").html(can.view("/app/base/bookmark_list", viewModel));
setTimeout(function () {
  // The view automatically refreshes to display these changes
  // 5s 后页面会变化
  bookmarks[0].attr("title", "Uno");
  bookmarks.push({url:"http://three.com", title:"Three"});
}, 5000);

can.Control

作用:

  • 将Model(数据)绑定到view(页面元素), 之后view(页面元素)可以获取Model(数据)
  • 监听UI事件

控制器类的创建:

  • var MyControl = can.Control.extend({实例属性和方法})
  • 实例方法init 中实现页面元素的绑定和数据初始渲染

控制器与页面元素绑定(生成控制器实例):

  • new MyControl(element, options); //element可以是页面选择器或者id, options中包含数据等

监听UI事件:

  • 实例方法中监听方法: "selector eventType": function(element, evt) {...}

使用data()从view获取数据模型

  • 模板中埋数据: <li {{data "somename"}}>
  • 通过页面元素获取数据: element.data("somename")