zoukankan      html  css  js  c++  java
  • 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;
    });
  • 相关阅读:
    svn cleanup failed–previous operation has not finished 解决方法
    开源SNS社区系统推荐
    从网络获取图片本地保存
    MS SQL Server 数据库连接字符串
    KeepAlive
    Configure Git in debian
    sqlserver query time
    RPi Text to Speech (Speech Synthesis)
    SQL Joins with C# LINQ
    search or reseed identity columns in sqlserver 2008
  • 原文地址:https://www.cnblogs.com/wangwenfei/p/backbone-route.html
Copyright © 2011-2022 走看看