<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="sea/sea.js"></script>

</head>

<body>

    <div id="container">

    </div>

    <!-- template  -->

    <script type="text/html" id="book-view">

        <span class="book-pane">

            <img src="<%= image %>" alt="<%= title %>">

            <p><a href="#subject/<%= id %>"><%= title %></a></p>

        </span>

    </script>

    <script type="text/html" id="demo-view">

        <span class="book-item">

            <img src="<%= image %>" alt="<%= title %>">

            <p><a href="<%= alt %>"><%= title %></a></p>

        </span>

    </script>

    <script>

        seajs.config({

            base: '../example-3',

            alias: {

                'jquery': 'lib/jquery.js',

                'underscore': 'lib/underscore.js',

                'backbone': 'lib/backbone.js',

                'DemoCollection': 'js/collections/DemoCollection',

                'DemoModel': 'js/models/DemoModel',

                'DemoApp': 'js/views/DemoApp',

                'DemoView': 'js/views/DemoView',

                'DemoRoute': 'js/routers/DemoRoute',

                'DemoBooksDetail': 'js/views/DemoBooksDetail'

            }

        });

        seajs.use('DemoApp', function (DemoApp) {

            new DemoApp();

            Backbone.history.start();

        });

    </script>

</body>

</html>
define('DemoApp', ['jquery', 'underscore', 'backbone', 'DemoCollection', 'DemoView', 'DemoRoute', 'DemoBooksDetail'], function (require, exports, module) {

    'use strict';

    var DemoCollection = require('DemoCollection'),

        DemoView = require('DemoView'),

        DemoRoute = require('DemoRoute'),

        DemoBooksDetail = require('DemoBooksDetail');

    var demoCollection = new DemoCollection();

    var demoRoute = new DemoRoute();

    demoRoute.on('route:home', function () {

        demoRoute.navigate('home', {

            trigger: true,

            replace: true

        });

    });

    demoRoute.on('route:subJectAction', function (id) {

        var booksItem = demoCollection.get(id),

            booksView;

        booksView = new DemoBooksDetail({

            model: booksItem

        });

        $('#container').html(booksView.render().el);

    });

    var DemoApp = Backbone.View.extend({

        el: 'body',

        initialize: function () {

            var that = this;

            this.listenTo(demoCollection, 'reset', this.render);

            demoCollection.fetch({

                success: function (e) {

                    that.render();

                }

            });

        },

        render: function () {

            demoCollection.each(this.addOne, this);

        },

        addOne: function (item) {

            var view = new DemoView({

                model: item

            });

            $('#container').append(view.render().el);

        }

    });

    module.exports = DemoApp;

});
define('DemoCollection', ['jquery', 'underscore', 'backbone', 'DemoModel'], function (require, exports, module) {

    'use strict';

    var DemoModel = require('DemoModel');

    var DemoCollection = Backbone.Collection.extend({

        model: DemoModel,

        url: 'https://api.douban.com/v2/book/search?q=javascript',

        parse: function (response) {

            return response.books;

        },

        sync: function (method, model, options) {

            var params = _.extend({

                type: 'GET',

                dataType: 'jsonp',

                url: this.url,

                processData: false

            }, options);

            return $.ajax(params);

        }

    });

    module.exports = DemoCollection;

});
define('DemoRoute', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {

    'use strict';

    var DemoRoute = Backbone.Router.extend({

        routes: {

            '': 'home',

            'subject/:id': 'subJectAction'

        }

    });

    module.exports = DemoRoute;

})
define('DemoBooksDetail', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {

    'use strict';

    var DemoBooksDetail = Backbone.View.extend({

        template: _.template($('#demo-view').html()),

        render: function () {

            this.$el.html(this.template(this.model.toJSON()));

            return this;

        }

    });

    module.exports = DemoBooksDetail;

});
define('DemoModel', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {

    'use strict';

    var DemoModel = Backbone.Model.extend({

        defaults: function () {

            return {

                id: '',

                image: '',

                title: '',

                alt: ''

            }

        }

    });

    module.exports = DemoModel;

});
define('DemoView', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {

    'use strict';

    var DemoView = Backbone.View.extend({

        template: _.template($('#book-view').html()),

        render: function () {

            this.$el.html(this.template(this.model.toJSON()));

            return this;

        }

    });

    module.exports = DemoView;

});

Backbone seajs demo2的更多相关文章

  1. Backbone seajs

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 初学seaJs模块化开发，利用grunt打包，减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  3. 使用backbone的history管理SPA应用的url

    本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是 ...

  4. 第四课：seajs的模块编译_compile过程

    最近比较闲,我就讲下seajs的模块编译_compile过程. 这里紧接着第三课的例子来讲解.首先是a.js的编译 Module.prototype._compile = function() { 1 ...

  5. 构建seajs业务模块之grunt VS spm build

    在最开始,我并不知道grunt可以构建CMD模块.(以下spm指代spm build) 当时正困惑于如何用spm方便的构建业务模块,后来看到@twinstony (感谢@twinstony的分享)使用 ...

  6. seajs+spm之再研究

    好久没有用seajs了,之前对spm也只是一知半解,这些天再次拿起来研究.谈谈我的认识与理解. 声明:本文不适合对seajs完全不了解的同学阅读.对于想知道seajs来龙去脉以及spm相关的同学&qu ...

  7. Seajs demo

    index.html <!doctype html> <html lang="en"> <head> <meta charset=&quo ...

  8. seajs第二节，seajs各模块依赖关系

    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  9. Backbone设计思路和关键源码分析

    一. Backbone的江湖地位: backbone作为一个老牌js框架为大规模前端开发提供了新的开发思路:前端MVC模式,这个模式也是前端开发演变过程中的一个重要里程碑,也为MVVM和Redux等开 ...

随机推荐

  1. 19、android面试题整理（自己给自己充充电吧）

    (转载,出处丢失,请原作者原谅,如有意见,私信我我会尽快删除本文) JAVA 1.GC是什么? 为什么要有GC?GC是垃圾收集的意思(Gabage Collection),内存处理是编程人员容易出现问 ...

  2. 【BZOJ】【2765】【JLOI2010】铁人双项比赛

    计算几何/半平面交 本来我是想去写POJ 1755的,然后想起了这道跟它很像的题,但应该是弱化版,所以就先写了这个…… 我们可以发现每个人的总用时,与k是呈一次函数关系的:$time_i=\frac{ ...

  3. spring AspectJ的Execution表达式说明

    Aspectj切入点语法定义 在使用spring框架配置AOP的时候,不管是通过XML配置文件还是注解的方式都需要定义pointcut"切入点" 例如定义切入点表达式 execut ...

  4. jQuery - AJAX (keep for myself)

    1. 简介:AJAX工作原理图 AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术.(如google地图) 目的:在不重载整个网页的情况下,AJAX 通 ...

  5. 异步解压ZIP文件

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  6. 客户端发包 GS端接收

    客户端发包,GS接收 bool GameServer::ProcessLoop(packet& rPkt)//GS线程做的 { if(false == m_spDataLayer->Re ...

  7. 1-Highcharts 3D图之普通3D柱状图与带空值

    <!DOCTYPE> <html lang='en'> <head> <title>1-Highcharts 3D图之普通3D柱状图与带空值</t ...

  8. .NET设计模式（14）：代理模式（Proxy Pattern）（转）

    摘要:在软件系统中,有些对象有时候由于跨越网络或者其他的障碍,而不能够或者不想直接访问另一个对象,如果直接访问会给系统带来不必要的复杂性,这时候可以在客户程序和目标对象之间增加一层中间层,让代理对象来 ...

  9. Map：比较新增加日期的和需要删除的日期 使用方法

    1.场景描述:根据在日历选择的日期,数据库来保持我们选择日期. 2.方法,硬删除的方法,每次全部删除,然后再重新添加选择的新的日期.这样导致如果需要保存create_time的情况,那么每次操作的都是 ...

  10. Sqli-labs less 38

    Less-38 学习了关于stacked injection的相关知识,我们在本关可以得到直接的运用. 在执行select时的sql语句为:SELECT * FROM users WHERE id=' ...