2014/08/14 – Backbonejs

浏览数：46 / 时间：2015年06月09日

[来自： 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;
            }
        })
    };
});