<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <style>

        span{display: block;}

        #container ul li{list-style-type: none;float: left;padding: 10px; margin-right: 10px;margin-bottom: 10px;}

        #container ul li img{display: block;width: 100px;height: 150px;}

        #container ul li p{white-space: nowrap;overflow: hidden; width: 100px;text-overflow: ellipsis;}

    </style>

</head>

<body>

    <div id="container">

        <ul></ul>

    </div>

    <!-- template -->

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

        <span class="books">

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

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

        </span>

    </script>

    <script>

        seajs.config({

            base: '../example-3',

            alias: {

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

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

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

                'DemoModel': 'js/DemoModel',

                'DemoView': 'js/DemoView',

                'DemoCollection': 'js/DemoCollection',

                'DemoApp': 'js/DemoApp'

            }

        });

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

            new DemoApp();

        });

    </script>

</body>

</html>
define('DemoModel', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {

    'use strict';

    var DemoModel = Backbone.Model.extend({

        defaults: function () {

            return {

                id: '',

                alt: '',

                url: '',

                title: '',

                image: ''

            }

        }

    });

    module.exports = DemoModel;

});
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('DemoView', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {

    'use strict';

    var DemoView = Backbone.View.extend({

        tagName: 'li',

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

        render: function () {

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

            return this;

        }

    });

    module.exports = DemoView;

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

    'use strict';

    var DemoCollection = require('DemoCollection'),

        DemoView = require('DemoView');

    var demoCollection = new DemoCollection();

    var DemoApp = Backbone.View.extend({

        el: 'body',

        events: {

        },

        initialize: function () {

            var that = this;

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

            demoCollection.fetch({

                success: function (e) {

                    console.log('data');

                    that.render();

                },

                error: function (e) {

                    console.log('Something went wrong!');

                }

            });

        },

        render: function () {

            demoCollection.each(this.addOne, this);

        },

        addOne: function (item) {

            var view = new DemoView({

                model: item

            });

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

        }

    });

    module.exports = DemoApp;

});

Backbone seajs的更多相关文章

  1. Backbone seajs demo2

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

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

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

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

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

  4. seajs+spm之再研究

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

  5. Seajs demo

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

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

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

  7. Backbone.js 的最佳应用场景有哪些？#zhihu#

    这段时间,想再次了解下backbone js的相关知识,就把一些认为不错的拿过来了: 新版的有道笔记 Web 版(http://note.youdao.com)也使用了 Backbone.就像其他答案 ...

  8. [转]seajs详解

    [转]seajs详解 SeaJS 是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(kk:模块可按需加载或全部加载). SeaJS ...

  9. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

随机推荐

  1. linux打包压缩命令汇总

    tar命令 [root@linux ~]# tar [-cxtzjvfpPN] 文件与目录 ....参数:-c :建立一个压缩文件的参数指令(create 的意思):-x :解开一个压缩文件的参数指令 ...

  2. PHP实现简单的学生信息管理系统（web版）

    (∩_∩) 1.概述 学了php的一些基础,包括HTML,php,pdo,mysql操作等,一直都没有将它们有机结合.最近写了一个简单的网页版学生信息管理系统,前台用HTML,脚本用到了JavaScr ...

  3. 如何用myeclispe远程调试tomcat

    如何用myeclispe远程调试tomcat 在工作开发中,通常用本机进行代码编写,然后将编好的工程部署到测试服务器进行测试.往往测试服务器并不是自己的本机,因此对调试带来众多不便.今天学习可以用my ...

  4. c++ 缺少动态库

    http://www.cnblogs.com/smartvessel/archive/2011/01/21/1940868.html 总结下来主要有3种方法: . 用ln将需要的so文件链接到/usr ...

  5. 关于Web服务器域名设置相关知识积累

    1.第一个问题,如何将一个服务器映射到一个域名上呢?    在申请域名的时候,会配置服务器IP和域名的对应关系,所以如果系统中只有一个应用的情况下,应用服务器不需要做任何配置. 2.在Tomcat服务 ...

  6. 如何开始你的CTF比赛之旅-网站安全-

    在过去的两个星期里,我已经在DEFCON 22 CTF里检测出了两个不同的问题:“shitsco ”和“ nonameyet ”.感谢所有 的意见和评论,我遇到的最常见的问题是:“我怎么才能在CTFs ...

  7. 持久化消息队列memcacheq的安装配置

    MemcacheQ 是一个基于 MemcacheDB 的消息队列服务器. 一.memcacheq介绍 特性: 1.简单易用 2.处理速度快 3.多条队列 4.并发性能好 5.与memcache的协议兼 ...

  8. Ajax风格的一款网页Loading效果

    现在比较流行的一款Ajax风格的网页Loading,多见于一些大量使用Ajax技术的网站中,页面加载时会自动显示提示信息,带载入动画效果,网页加载完自动消失,是一款正在具有Loading功能的网页进度 ...

  9. IOS 提交审核，遇到Missing Push Notification Entitlement 问题。

    貌似不影响提交........还是有人提交成了. 昨天晚上提交软件审核,遇到了Missing Push Notification Entitlement 的问题. 问题起因:这个版本我添加了PUSH推 ...

  10. http authorization basic请求代码示例

    /** * */ package testJava.java; import java.io.BufferedReader; import java.io.InputStream; import ja ...