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

---源于莎士比亚的《哈姆雷特》

导航

Backbone seajs 

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

 

posted on 2014-03-18 00:12  Ijavascript  阅读(302)  评论(0)  编辑  收藏  举报