2014/08/04 – Backbonejs

[来自: 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

 

2014/08/04 – Backbonejs,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。