Backbone.js學習筆記 Hello World!

Hanks10100 發布于2019-08-22 10:55 / 2500人閱讀

摘要：使用和架構創建一個典型的項目。屬性被賦值給傳入的函數運行的結果。渲染，我們使用，這是一個對象，它指向的屬性，使用函數使用的結果替換。最后，啟動整體應用，為了保證完全加載，用包裝器調用完整日常練習一些在對象初始化的時候執行的代碼

使用Backbone.js 和 MVC 架構創建一個典型的Hello world項目。雖然是“殺雞用牛刀了”，畢竟是我第一次使用Backbone.js

依賴

jQuery 1.9.1

Undersore.js 1.5.0

Backbone.js

開始





backbone日常練習

在 extend 調用里設置指定的 routes 屬性:

var router = Backbone.Router.extend({
    routes: {
        " ": "home"
    }
});

Backbone中routes 屬性需要下面的格式： ‘path/:param’: "action"，它實現了是當URl是 filename#path/param時，觸發名為action 的函數（在Router 對象里定義）。然后添加一個 home 路由：

var router = Backbone.Router.extend({
    routes: {
        " ": "home"
    }
});

現在我們需要添加一個 home 函數：

var router = Backbone.Router.extend({
    routes: {
        " ": "home"
    }
    ‘home’: function (){
        // 渲染 HTML
    }
});

添加創建和渲染 View 的邏輯。現在先定義 homeView:

var homeView = Backbone.View.extend({    
});

然后給 homeView 添加屬性

var homeView = Backbone.View.extend({    
    el: "body",
    teplate: _.template("Hello world!")
});

el 是一個保存 jQuery 選擇器的字符串，也可以使用"."作為類和"#"作為ID名。template屬性被賦值給傳入 Hello World 的 Underscore.js 函數 template 運行的結果。

渲染 homeView，我們使用 this.$el，這是一個 jQuery 對象，它指向 el 的屬性，使用 jQuery.html() 函數使用 this.template() 的結果替換 HTML。下面是完整的 homeView 代碼：

var homeView = Backbone.View.extend({
        el: "body",
        template: _.template("Hello World"),
        render: function (){
            this.$el.html(this.template({}));
        }
    });

現在我們返回到 router，添加兩行到 home 函數：

var router = Backbone.Router.extend({
        routes: {
            "": "home"
        },
        initialize: function (){
            // 一些在對象初始化的時候執行的代碼
        },
        home: function (){
            this.homeView = new homeView;
            this.homeView.render();
        }
    });

第一行創建了一個 homeView 對象并且賦值給 router 的 homeView 屬性。第二行調用 homeView 對象的 render() 方法，觸發 Hello World! 輸出。

最后，啟動整體 Backbone 應用，為了保證 Dom 完全加載，用 $(function (){}) 包裝器調用 new router：

var app;
$(function (){
    app = new router;
    Backbone.history.start();
});

完整DEMO





backbone日常練習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91452.html

Backbone.js學習筆記（一）

摘要：它通過數據模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現有的通過接口進行交互。本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...

FrancisSoung 2019-08-21 10:21 評論0 收藏0
Backbone.js學習筆記（二）細說MVC

摘要：因為是一條數據記錄，也就是說，相當于是一個數據集。通常我們需要重載函數，聲明，以及通過或為視圖指定根元素。通過綁定視圖的函數到模型的事件模型數據會即時的顯示在中。實例屬性參數以及類屬性參數會被直接注冊到集合的構造函數。對于初學backbone.js的同學可以先參考我這篇文章：Backbone.js學習筆記（一） Backbone源碼結構 showImg(https://segme...

taoszu 2019-08-21 10:29 評論0 收藏0
Backbone.js學習筆記：圖書案例-事件綁定

摘要：數據更新的時候，支持多事件和自定義事件。然后使用兩個事件和的自定義事件。我們將使用別名函數。是為了模擬從服務器獲取響應的時間。在它內部里面，使用和返回模型屬性把選中的模型賦值給當前視圖的模型。前言：我們繼續使用上一次寫的圖書案例，在基礎上面進行改進！事件綁定在我們瀏覽網頁的時候，獲取數據并不是一下只就全部獲取到的，為了創建一個更好的用戶體驗，就來模擬一個加載（Spi...

caige 2019-08-21 10:26 評論0 收藏0
python學習筆記1---python的基本數據類型

摘要：數字整型與浮點型整數沒有之分浮點數里面沒有單精度和雙精度之分表示整除進制進制，進制，進制，進制，，，。。。。 Number：數字 1）整型與浮點型整數：int（沒有short、int、long之分）浮點數：float（python里面沒有單精度和雙精度之分） >>> print(hello world) hello world >>> 1 1 >>> 133434 133434 >...

mgckid 2019-07-31 11:12 評論0 收藏0