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;
});

posted on 2014-03-18 15:41 Ijavascript 阅读(464) 评论(0) 编辑收藏举报

刷新页面返回顶部

To be or not to be.That is a question!

导航

公告

Backbone seajs demo2