[来自： Backbone.js 开发秘笈 第8章]
相关技术：
1. 使用 Require.js 组织项目结构
文件结构：
index.html
lib/
underscore.js
jquery.js
backbone.js
js/
app.js
userDefine.js
index.html:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <!-- data-main 程序入口点 --> <script src="lib/require.js" data-main="js/app"></script> <body> </body> </html>
app.js:
//require 配置信息 require.config({ //定义库别名 paths: { jquery: "../lib/jquery", underscore: "../lib/underscore", backbone: "../lib/backbone" }, //定义模块间关系 shim: { backbone: { deps: ["jquery", "underscore"],//依赖关系 exports: "Backbone"//非 AMD 标准类库定义 }, underscore: { exports: "_" }, jquery: { exports: "$" } } }); //require() 方法启动应用程序 require(["jquery", "../js/userDefine"], function ($, user) { $(function () { $("body").html(new user.userListView({ collection: new user.userCollection([ { id: 1, name: "yoyo" }, { id: 4, name: "ramos" }, { id: 7, name: "ronaldo" } ]) }).render().el); }); });
userDefine.js:
//AMD 标准模块定义 [参数一为加载模块数组，参数二为模块加载后的回调函数] define(["jquery", "backbone", "underscore"], function ($, Backbone, _) { return { userCollection: Backbone.Collection.extend({ model: Backbone.Model.extend() }) , userListView: Backbone.View.extend({ tagName: "ul", render: function () { this.$el.html(_.map(this.collection.models, function (model) { return "<li><a href=‘javascript:;‘>" + model.get("name") + "</a></li>"; })); return this; } }) }; });
2014/08/14 – Backbonejs,布布扣,bubuko.com
原文：http://www.cnblogs.com/yoyoone23/p/3912445.html