MVT

• MVC --> MVT: T--Template

• Model 模型

  • 模型包含属性以及对于属性的验证
  • 模型的持久化
  • 模型变化对于视图的更新
  • 模型的分组--集合

• View 视图

  • 用户与视图交互来读取和修改模型数据
  • 视图的 render() 方法使用underscore.js 渲染模型内容,并更新到视图
  • 视图通过事件监听机制将交互委托给事件处理程序处理

• Template 模板

  • JS模板可以接收多种数据格式, 一般是一个字符串序列化格式, 以它来填充模板

• Controller 控制器

  • backbone中视图通常包含控制逻辑, 路由用于帮助管理应用程序状态

Model

• Backbone.Model
  • 构造函数: initialize()
  • 默认属性: defaults
  • 属性集合: Model.attributes
  • 通用方法:
    • Model.get
  • 监听模型变化:
    • 任一属性变化: this.on('change', func)
    • 指定属性变化: this.on('change:title', func)
  • 模型验证:
    • Model.validate() 有效则不返回, 否则返回错误消息, 触发 invalid 事件, 不再继续执行 save()

View

• Backbone.View

  • el: 对Dom元素的一个引用

    • 对于视图创建一个新元素, 可以设置 tagName, id or className
    • 若要指定一个已有元素: 可以设置el, e.g. el: #footer, .$el == $(view.el)

  • setElement: 重新指定一个 dom 元素

  • render() : 渲染模板
  • events: eventName, selector: callbackFunction

Collection

• Backbone.Collection
  • add
  • remove
  • get('id')

Restful persistence

• add url property
• fetch() to get models
• save() to save models
• destroy() to delete models

Event

• on: subscribe an event handler
• off: unsubscribe an event handler
• trigger: publish an event
• listenTo: subscribe an event handler of other object
• stopListening: unsubscribe an event handler of other object

Router

• 将 URL 路由映射到一个函数上

Books

• Developing Backbone.js Application -- Addy Osmani http://oreil.ly/dev_backbone_js_apps http://addyosmani.com

Tips

• MAC: mac+alt+i
• Win: ctrl+alt+i

Cases

• TodoMVC
• Disqus
• Khan Academy 可汗学院
• MetaLab Flow
• Walmart Mobile
• Airbnb
• Code School