Backbone seajs demo2

<!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的更多相关文章

Backbone seajs
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
初学seaJs模块化开发，利用grunt打包，减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
使用backbone的history管理SPA应用的url
本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是 ...
第四课：seajs的模块编译_compile过程
最近比较闲,我就讲下seajs的模块编译_compile过程. 这里紧接着第三课的例子来讲解.首先是a.js的编译 Module.prototype._compile = function() { 1 ...
构建seajs业务模块之grunt VS spm build
在最开始,我并不知道grunt可以构建CMD模块.(以下spm指代spm build) 当时正困惑于如何用spm方便的构建业务模块,后来看到@twinstony (感谢@twinstony的分享)使用 ...
seajs+spm之再研究
好久没有用seajs了,之前对spm也只是一知半解,这些天再次拿起来研究.谈谈我的认识与理解. 声明:本文不适合对seajs完全不了解的同学阅读.对于想知道seajs来龙去脉以及spm相关的同学&qu ...
Seajs demo
index.html <!doctype html> <html lang="en"> <head> <meta charset=&quo ...
seajs第二节，seajs各模块依赖关系
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
Backbone设计思路和关键源码分析
一. Backbone的江湖地位: backbone作为一个老牌js框架为大规模前端开发提供了新的开发思路:前端MVC模式,这个模式也是前端开发演变过程中的一个重要里程碑,也为MVVM和Redux等开 ...

随机推荐

Jquery_联系电话正则表达式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
ngcordova 监控网络制式改变
ngcordova 监控网络制式改变 keywords cordova,phonegap,ionic,network,网络制式 API参考 http://ngcordova.com/docs/plug ...
Hibernate O/R Mapping模拟
作为SSH中的重要一环,有必要理解一下Hibernate对 O/R Mapping的实现. 主要利用java的反射机制来得到完整的SQL语句. 准备工作: 1. Object Student实体类: ...
php正则过滤html标签、空格、换行符的代码，提取图片
$descclear = str_replace("r","",$descclear);//过滤换行 $descclear = str_replace(&quo ...
高达渐出现效果Shader
原地址: http://liweizhaolili.blog.163.com/blog/static/1623074420140591864/ 最近在玩游戏<高达破坏者>,里面的高达出现的 ...
swift函数和初始化控件（// MARK:分割线）
import UIKit , , , ) view.backgroundColor = UIColor.redColor() self.view.addSubview( ...
POJ 2195
#include<iostream>//by Chengdacaizi #include<stdio.h> #include<vector> #include< ...
BroadcastReceiver应用1
有两种注册方式:1. 在AndroidManifest中注册.2. 在代码中直接注册,这种注册需要注意的一点是:当注册此Receiver的Activity退出的时候,一定要调用unregisterRe ...
win7桌面便签。自带的
新建WIN7下的桌面便签小程序桌面—>新建快捷方式-> 输入%windir%\system32\StikyNot.exe
maven依赖的全局排除
今天遇到要全局排除一个maven依赖,因为Maven本身没有全局排除依赖的办法, 参考了同事人英写的一篇博文(可以看这里http://my.oschina.net/liuyongpo/blog/177 ...

Backbone seajs demo2

Backbone seajs demo2的更多相关文章

随机推荐

热门专题