2014/08/04 – Backbonejs

浏览数：23 / 时间：2015年06月09日

[来自: Backbone.js 开发秘笈第1章]

各种模型实际上是通过扩展其基类 Backbone.Model 实现的。同理，定义的集合是靠扩展其基类 Backbone.Collection 而实现的。

控制器的功能被分散实现在 Backbone.Router 和 Backbone.View 当中。

路由器负责处理 URL 的变化，并且委派一个视图来继续处理应用。路由器（异步）获取模型后，随即触发一个视图的更新操作。

视图负责监听 DOM 事件。它要么对模型进行更新，要么通过路由器转移到应用的其他部分。

Backbone 依赖 Underscore ， JQuery 或 Zepto 。

Backbone.Router 只是用来定义路由以及相关的回调函数，而其他所有的重要工作则全部都由 Backbone.history 完成。作为窗口中的全局路由器， Backbone.history 负责处理 hashchange 或者 pushState 事件、匹配到合适的路由以及触发回调函数。你永远不用为（ Backbone.history ）这个全局路由器创建一个实例，因为到你使用路由器时， Backbone 会自动创建。

Backbonejs 插件: https://github.com/jashkenas/backbone/wiki/Extensions,-Plugins,-Resources

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8"/>
        <title></title>

        <script src="lib/jquery.js"></script>
        <script src="lib/underscore.js"></script>
        <script src="lib/backbone.js"></script>
        <script src="js/main.js"></script>
    </head>
<body>

</body>
</html>

index.html

(function ($) {
    $(function () {

        /* define */

        //Mode--------------------------------------------------

        var InvoiceItemMode = Backbone.Model.extend({
            defaults: {
                price: 0,
                quantity: 0
            },
            calculateAmount: function () {
                return this.get(‘price‘) * this.get(‘quantity‘);
            }
        });

        //View---------------------------------------------------
        var PreviewInvoiceItemView = Backbone.View.extend({
            template: _.template(‘Price: <%= price %>. Quantity: <%= quantity %>. Amount: <%= amount %>.‘),
            render: function () {
                var html = this.template({
                    price: this.model.get(‘price‘),
                    quantity: this.model.get(‘quantity‘),
                    amount: this.model.calculateAmount()
                });

                $(this.el).html(html);
            }
        });

        //Router-------------------------------------------------
        var Workspace = Backbone.Router.extend({
            routes: {
                ‘‘: ‘invoiceList‘,
                ‘invoice‘: ‘invoiceList‘
            },
            invoiceList: function () {
                var invoiceListView = new PreviewInvoiceItemView({
                    model: new InvoiceItemMode({
                        price: 2,
                        quantity: 3
                    }),
                    el: ‘body‘
                });
                invoiceListView.render();
            }
        });

        /* apply */

        //instance-----------------------------------------------
        /*
        var invoiceItemMode = new InvoiceItemMode({
            price: 2,
            quantity: 3
        });
        var previewInvoiceItemView = new PreviewInvoiceItemView({
            model: invoiceItemMode,
            el: ‘body‘
        });
        */

        //execute------------------------------------------------
        //previewInvoiceItemView.render();
        new Workspace();
        Backbone.history.start();
    });
})(jQuery);

main.js