Backbone.js 是一个轻量级的 JavaScript MVC 框架，通过 Model、Collection 和 View 的组合，帮助开发者组织前端代码。理解它们之间的“映射”关系，是掌握 Backbone 的关键。
1. Model 与 View 的映射
在 Backbone 中，视图（View）通常绑定到一个模型（Model）或集合（Collection）。当模型数据发生变化时，视图可以自动更新（需手动监听事件）。
// 定义模型
const User = Backbone.Model.extend();
// 创建实例
const user = new User({ name: '张三', age: 25 });
// 定义视图
const UserView = Backbone.View.extend({
tagName: 'div',
render: function() {
this.$el.html(`<p>姓名：${this.model.get('name')}</p>`);
return this;
}
});
// 绑定模型到视图
const view = new UserView({ model: user });
$('body').append(view.render().el);2. Collection 与 View 的映射
集合（Collection）用于管理一组模型。常用于列表渲染场景。每个子项可由单独的 ItemView 渲染，主视图负责遍历集合并插入子视图。
const Users = Backbone.Collection.extend({ model: User });
const users = new Users([
{ name: '李四' },
{ name: '王五' }
]);
const UserListView = Backbone.View.extend({
tagName: 'ul',
render: function() {
this.collection.each(model => {
const itemView = new UserView({ model });
this.$el.append(itemView.render().el);
});
return this;
}
});3. 事件驱动的数据同步
Backbone 使用事件系统实现“响应式”更新。常用监听：
model.on('change', callback)：模型属性变化collection.on('add remove reset', callback)：集合内容变更
视图可在初始化时监听这些事件，实现自动重渲染。
4. 注意事项
- Backbone 不提供自动双向绑定，需手动处理 DOM 更新。
- 合理拆分视图为细粒度组件，避免大型单视图。
- 使用
this.listenTo()而非model.on()，便于内存管理。