backbone.jsbackbone.js入门


备注

Backbone是一个简单但强大的客户端JavaScript库,用于构建应用程序。数据表示为模型,可以将其收集到集合中。模型状态与视图一起显示

Backbone尝试提供在JavaScript Web应用程序中有用的最小数据结构和用户界面原语集。它的目标是提供这些工具,而不是规定如何使用它们或用例应该是什么样子。这意味着开发人员可以自由地设计其应用程序的完整体验。

基本设置

Backbone需要Underscore和(可选) jQuery - 用于DOM操作(使用Backbone.View)和RESTful持久性。

启动和运行Backbone的最快方法是在HTML <head> 创建一个带有简单脚本标记的index.html 文件:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
    </head>
    <body>
    </body>
</html>
 

Backbone现在可以在页面中使用。

使用Backbone的示例(主要是Backbone.Model)

Backbone.js由四个独立的组件组成:集合,模型,路由器和视图。其中每个都有不同的用途:

  • Model - 表示单个数据对象,但添加了本机JavaScript对象未提供的其他功能,例如事件系统以及检索和发送数据到远程服务器的更方便的方法

  • Collection - 表示模型的集合或“集合”,并提供管理其模型的功能。

  • View - 表示用户界面的单个部分;每个View包装一个HTML DOM元素,并提供用于处理该元素的结构以及简单事件绑定等便利功能。

  • Router - 通过允许应用程序触发不同的逻辑(例如显示不同的页面)以响应URL更改来启用“单页面应用程序”。

创造自己的口味

在我们看看如何使用这些组件之前,让我们先来看看Backbone的类系统。要创建Backbone类的新子类,只需调用原始类的extend 方法,并将实例属性和(静态)类属性作为对象传递给它:

const MyModelClass = Backbone.Model.extend({
    instanceMethod: function() { console.log('Instance method!'); },
}, {
    staticMethod: function() { console.log('Static method!'); },
});
 

与任何其他类系统一样,可以在类的实例(对象)上调用实例方法,而直接在类本身(构造函数)上调用静态方法:

var myInstance = new MyModelClass();

// Call an instance method on our instance
myInstance.instanceMethod(); // logs "Instance method!"

// Call a static method on our class
MyModelClass.staticMethod(); // logs "Static method!"
 

使用课程

现在,让我们看一个如何使用每个类的快速示例。我们将从一本书的Model 开始。

const Book = Backbone.Model.extend({
    idAttribute: 'isbn',
    urlRoot: '/book'
});
 

让我们分解那里刚刚发生的事情。首先,我们创建了ModelBook 子类,并为它们提供了两个实例属性。

  • idAttribute 告诉Backbone在执行AJAX操作时使用模型的“isbn”属性作为其ID。
  • urlRoot 告诉Backbone在www.example.com/book 上查找图书数据。

现在让我们创建一本书的实例,并从服务器获取其数据:

var huckleberryFinn = new Book({ isbn: '0486403491' });
huckleberryFinn.fetch({
    // the Backbone way
    success: (model, response, options) => {
       console.log(model.get('name')); // logs "Huckleberry Finn"
    }
}).done(() => console.log('the jQuery promise way'));
 

当我们创建了一个新的Book ,我们通过它的对象,骨干网使用这个对象作为初始“属性”(数据) Model 。因为Backbone知道idAttributeisbn ,所以它知道我们新书的URL是/book/0486403491 。当我们告诉它fetch ,Backbone将使用jQuery为本书的数据发出AJAX请求。 fetch 返回一个promise(就像$.ajax ),你可以用它来在fetch完成后触发动作。

可以使用getset 方法访问或修改属性:

huckleberryFinn.get('numberOfPages'); // returns 64

huckleberryFinn.set('numberOfPages', 1); // changes numberOfPages to 1
 

Models 也有一个事件系统,您可以使用反应时,事情发生在一个Model 。例如,要在numberOfPages 更改时记录消息,您可以执行以下操作:

huckleberryFinn.on('change:numberOfPages', () => console.log('Page change!'));
 

有关其他Backbone类的更详细介绍,请查看其各自的文档页面。

示例展示了基本概念

以下示例是对以下内容的介绍:


<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
</head>
<body>

    <div id="example_container"></div>

    <script type="text/template" id="example_template">
        <label><%= example_label %></label>
        <input type="text" id="example_input" />
        <input type="button" id="example_button" value="Search" />
    </script>
    <script type="text/javascript">
        var ExampleView = Backbone.View.extend({
            // Compile the template using underscore
            template: _.template($("#example_template").html()),
            events: {
                "click #example_button": "onButtonClick"
            },

            initialize: function(options) {
                this.customOption = options.customOption;
            },

            render: function() {
                // Load the compiled HTML into the Backbone "el"
                this.$el.html(this.template({
                    example_label: "My Search"
                }));

                return this; // for chaining, a Backbone's standard for render
            },

            onButtonClick: function(event) {
                // Button clicked, you can access the button that 
                // was clicked with event.currentTarget
                console.log("Searching for " + $("#example_input").val());
            }
        });
        $(function() {
            //show the view inside the div with id 'example_container'
            var exampleView = new ExampleView({
                el: $("#example_container"),
                customOption: 41,
            });
            exampleView.render();
        });
    </script>
</body>
</html>
 

Hello Web(基本的“Hello World”类型设置)

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
        
        <script>
            $( function(){
                ( function(){
                    var View = Backbone.View.extend( {
                        "el": "body",
                        "template": _.template( "<p>Hello, Web!</p>" ),
    
                        "initialize": function(){
                            this.render();
                        },
                        "render": function(){
                            this.$el.html( this.template() );
                        }
                    } );
    
                    new View();
                })()
            } );
        </script>
    </head>
    <body>
    </body>
</html>