2、通過helloworld來認識下backbone
阿新 • • 發佈：2019-01-02
先來說一下這個helloworld的功能：
在頁面上有一個報道的按鈕，點選彈出輸入框，輸入內容，確認，最後內容會加到頁面上。頁面圖如下：
下面來看程式碼：
<!DOCTYPE html> <html> <head> <title>the5fire.net-backbone.js-Hello World</title> </head> <body> <button id="check">報到</button> <ul id="world-list"> </ul> <a href="http://www.the5fire.net">更多教程</a> </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> <script> (function ($) { World = Backbone.Model.extend({ //建立一個World的物件，擁有name屬性 name: null }); Worlds = Backbone.Collection.extend({ //World物件的集合 initialize: function (models, options) { this.bind("add", options.view.addOneWorld); } }); AppView = Backbone.View.extend({ el: $("body"), initialize: function () { //建構函式，例項化一個World集合類，並且以字典方式傳入AppView的物件 this.worlds = new Worlds(null, { view : this }) }, events: { "click #check": "checkIn", //事件繫結，繫結Dom中id為check的元素 }, checkIn: function () { var world_name = prompt("請問，您是哪星人?"); if(world_name == "") world_name = '未知'; var world = new World({ name: world_name }); this.worlds.add(world); }, addOneWorld: function(model) { $("#world-list").append("<li>這裡是來自 <b>" + model.get('name') + "</b> 星球的問候：hello world！</li>"); } }); //例項化AppView var appview = new AppView; })(jQuery); </script> </html>
我認為程式碼是直觀的，這裡面涉及到backbone的三個部分，view、model、collection，以後都會提到，這裡只要瞭解，model代表一個數據模型，collection是模型的一個集合，而view是用來處理頁面以及簡單的頁面邏輯的。