模型与集合
✅ 模型(Model) 是数据的核心,支持数据验证、默认值和事件监听。
- 使用
model.set()
更新属性 - 通过
model.get()
获取属性值 model.validate()
实现数据校验逻辑- 集合(Collection)管理多个模型,提供过滤、排序功能
collection.where()
快速查找符合条件的模型collection.fetch()
从服务器获取数据
🔗 想深入了解模型与集合的实践?点击这里查看详细教程
视图与事件
⚠️ 视图(View) 负责渲染模板并与用户交互,需注意事件绑定的生命周期。
- 使用
this.listenTo()
监听模型事件 this.$el
操作DOM元素- 事件委托:
events: { 'click .button': 'handleClick' }
- 避免内存泄漏:确保解除事件绑定
路由与历史
🚀 路由(Router) 控制应用的导航逻辑,与 History
类配合实现URL管理。
- 定义路由路径:
this.route('about', 'showAbout')
- 使用
Backbone.History.start()
启动历史记录 - 路由参数解析:
this.params
提取URL参数 - 嵌套路由:通过子路由实现模块化导航
模板引擎
🧩 模板引擎 支持动态数据绑定,常用模板有Handlebars、Mustache。
- 使用
this.template
存储模板函数 - 数据渲染:
this.template({ model: this.model })
- 模板缓存:
_.templateCache
提高性能 - 模板继承:通过父模板扩展子模板功能
自定义事件
🔔 自定义事件 可增强组件间的解耦,使用 trigger()
和 on()
方法。
- 全局事件:
Backbone.on('custom_event', callback)
- 局部事件:
this.trigger('custom_event', data)
- 事件命名规范:使用驼峰式命名(如
user:created
) - 事件总线:
Backbone.Events
提供统一事件管理
🔗 探索更多高级用法?访问 Backbone.js 官方文档 获取完整指南