backbone初次使用及hello world

時間 2019-11-11

標籤 backbone 初次使用 hello world 简体版

原文原文鏈接

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.html

簡而言之，Backbone.js是一個能夠在前端組織MVC的javascript框架。前端

寫的Javascript代碼一旦多起來，沒有一個好的組織，那就會像噩夢同樣。java

Backbone提供了Models, Collections, Views。Models 用來建立數據，校驗數據，綁定事件，存儲數據到服務器端；Collections 包含你建立的 functions；Views 用來展現數據。如此這般，在前端也作到了數據和顯示分離。jquery

Backbone依賴於Underscore.js，這是一個有不少經常使用函數的js文件（很好用）.git

與backbone.js相似的還有AngularJS，一樣爲js的mvc框架，二者對比：http://www.zhihu.com/question/21170137。github

backbone應用場景：http://www.zhihu.com/question/19720745web

Backbone's only hard dependency is Underscore.js ( >= 1.5.0). For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery, and json2.js for older Internet Explorer support. (Mimics of the Underscore and jQuery APIs, such as Lo-Dash and Zepto, will also tend to work, with varying degrees of compatibility.)ajax

helloworld教程：http://arturadib.com/hello-backbonejs/json

html模板：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>hello-backbonejs</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

  <script src="1.js"></script>
</body>
</html>

example1:This example illustrates the declaration and instantiation of a minimalist View

(function($){
      // **ListView class**: Our main app view.
      var ListView = Backbone.View.extend({
        el: $('body'), // attaches `this.el` to an existing element.
        // `initialize()`: Automatically called upon instantiation. Where you make all types of bindings, _excluding_ UI events, such as clicks, etc.
        initialize: function(){
          _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods

           this.render(); // not all views are self-rendering. This one is.
        },
        // `render()`: Function in charge of rendering the entire view in `this.el`. Needs to be manually called by the user.
        render: function(){
          $(this.el).append("<ul> <li>hello world</li> </ul>");
        }
      });

      // **listView instance**: Instantiate main app view.
      var listView = new ListView();
    })(jQuery);

This example illustrates the binding of DOM events to View methods.

Working example: 2.html.

//
(function($){
  var ListView = Backbone.View.extend({
    el: $('body'), // el attaches to existing element
    // `events`: Where DOM events are bound to View methods. Backbone doesn't have a separate controller to handle such bindings; it all happens in a View.
    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem'); // every function that uses 'this' as the current object should be in here

      this.counter = 0; // total number of items added thus far
      this.render();
    },
    // `render()` now introduces a button to add a new list item.
    render: function(){
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
    },
    // `addItem()`: Custom function called via `click` event above.
    addItem: function(){
      this.counter++;
      $('ul', this.el).append("<li>hello world"+this.counter+"</li>");
    }
  });

  var listView = new ListView();
})(jQuery);

events: Where DOM events are bound to View methods. Backbone doesn't have a separate controller to handle such bindings; it all happens in a View.

 (function($){
      // **Item class**: The atomic part of our Model. A model is basically a Javascript object, i.e. key-value pairs, with some helper functions to handle event triggering, persistence, etc.
      var Item = Backbone.Model.extend({
        defaults: {
          part1: 'hellosdf',
          part2: 'worlsdfd'
        }
      });

      // **List class**: A collection of `Item`s. Basically an array of Model objects with some helper functions.
      var List = Backbone.Collection.extend({
        model: Item
      });

      var ListView = Backbone.View.extend({
        el: $('body'),
        events: {
          'click button#add': 'addItem'
        },
        // `initialize()` now instantiates a Collection, and binds its `add` event to own method `appendItem`. (Recall that Backbone doesn't offer a separate Controller for bindings...).
        initialize: function(){
          _.bindAll(this, 'render', 'addItem', 'appendItem'); // remember: every function that uses 'this' as the current object should be in here

          this.collection = new List();
          this.collection.bind('add', this.appendItem); // collection event binder

          this.counter = 0;
          this.render();
        },
        render: function(){
          // Save reference to `this` so it can be accessed from within the scope of the callback below
          var self = this;
          $(this.el).append("<button id='add'>Add list item</button>");
          $(this.el).append("<ul></ul>");
          _(this.collection.models).each(function(item){ // in case collection is not empty
            self.appendItem(item);
          }, this);
        },
        // `addItem()` now deals solely with models/collections. View updates are delegated to the `add` event listener `appendItem()` below.
        addItem: function(){
          this.counter++;
          var item = new Item();
          item.set({
            part2: item.get('part2') + this.counter // modify item defaults
          });
          this.collection.add(item); // add item to collection; view is updated via event 'add'
        },
        // `appendItem()` is triggered by the collection event `add`, and handles the visual update.
        appendItem: function(item){
          $('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
        }
      });

      var listView = new ListView();
    })(jQuery);

Item class: The atomic part of our Model. A model is basically a Javascript object, i.e. key-value pairs, with some helper functions to handle event triggering, persistence, etc.

List class: A collection of Items. Basically an array of Model objects with some helper functions.

underscore bindAll:

bindAll_.bindAll(object, *methodNames)
Binds a number of methods on the object, specified by methodNames, to be run in the context of that object whenever they are invoked. Very handy for binding functions that are going to be used as event handlers, which would otherwise be invoked with a fairly useless this. methodNames are required.

var buttonView = {
  label  : 'underscore',
  onClick: function(){ alert('clicked: ' + this.label); },
  onHover: function(){ console.log('hovering: ' + this.label); }
};
_.bindAll(buttonView, 'onClick', 'onHover');
// When the button is clicked, this.label will have the correct value.
jQuery('#underscore_button').bind('click', buttonView.onClick);

demo4:This example illustrates how to delegate the rendering of a Model to a dedicated View.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。