码迷,mamicode.com
首页 > Web开发 > 详细

2014/08/14 – Backbonejs

时间:2014-08-14 16:20:58      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   使用   os   io   

[来自: 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

2014/08/14 – Backbonejs

标签:style   blog   http   color   java   使用   os   io   

原文地址:http://www.cnblogs.com/yoyoone23/p/3912445.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!