模型与集合

模型(Model) 是数据的核心,支持数据验证、默认值和事件监听。

  • 使用 model.set() 更新属性
  • 通过 model.get() 获取属性值
  • model.validate() 实现数据校验逻辑
  • 集合(Collection)管理多个模型,提供过滤、排序功能
    • collection.where() 快速查找符合条件的模型
    • collection.fetch() 从服务器获取数据
BackboneJS_Model

🔗 想深入了解模型与集合的实践?点击这里查看详细教程

视图与事件

⚠️ 视图(View) 负责渲染模板并与用户交互,需注意事件绑定的生命周期。

  • 使用 this.listenTo() 监听模型事件
  • this.$el 操作DOM元素
  • 事件委托:events: { 'click .button': 'handleClick' }
  • 避免内存泄漏:确保解除事件绑定
BackboneJS_View

路由与历史

🚀 路由(Router) 控制应用的导航逻辑,与 History 类配合实现URL管理。

  • 定义路由路径:this.route('about', 'showAbout')
  • 使用 Backbone.History.start() 启动历史记录
  • 路由参数解析:this.params 提取URL参数
  • 嵌套路由:通过子路由实现模块化导航

模板引擎

🧩 模板引擎 支持动态数据绑定,常用模板有Handlebars、Mustache。

  • 使用 this.template 存储模板函数
  • 数据渲染:this.template({ model: this.model })
  • 模板缓存:_.templateCache 提高性能
  • 模板继承:通过父模板扩展子模板功能
BackboneJS_Template

自定义事件

🔔 自定义事件 可增强组件间的解耦,使用 trigger()on() 方法。

  • 全局事件:Backbone.on('custom_event', callback)
  • 局部事件:this.trigger('custom_event', data)
  • 事件命名规范:使用驼峰式命名(如 user:created
  • 事件总线:Backbone.Events 提供统一事件管理

🔗 探索更多高级用法?访问 Backbone.js 官方文档 获取完整指南