鍍金池/ 教程/ HTML/ BackboneJS應(yīng)用
BackboneJS Collection.extend()方法
BackboneJS collection.pop()方法
BackboneJS collection.set()方法
BackboneJS collection.remove()方法
BackboneJS view.attributes
Backbone.View.extend()方法
BackboneJS router.route()方法
BackboneJS model.destroy()方法
BackboneJS視圖初始化
BackboneJS事件stopListening
BackboneJS collection.clone()方法
BackboneJS router.navigate()方法
BackboneJS model.idAttribute屬性
BackboneJS router.execute()方法
BackboneJS模型
BackboneJS model.previousAttributes()方法
BackboneJS model.escape()方法
BackboneJS model.previous()方法
BackboneJS應(yīng)用
BackboneJS view.setElement()方法
BackboneJS collection.findWhere()方法
BackboneJS collection.slice()方法
BackboneJS view.el
BackboneJS集合
BackboneJS model.unset()方法
BackboneJS collection.comparator屬性
BackboneJS collection.push()方法
BackboneJS model.save()方法
BackboneJS collection.shift()方法
BackboneJS collection.parse()方法
BackboneJS Collection.model
BackboneJS教程
BackboneJS model.defaults
BackboneJS事件trigger
BackboneJS collection.sync()方法
BackboneJS model.has()方法
BackboneJS model.isNew()方法
BackboneJS model.url()方法
BackboneJS Model.get()方法
BackboneJS視圖
BackboneJS model.clone()方法
BackboneJS collection.toJSON()方法
BackboneJS Backbone.emulateHTTP
BackboneJS Router初始化
BackboneJS環(huán)境設(shè)置
BackboneJS model.fetch()方法
BackboneJS事件
BackboneJS Model.set()方法
BackboneJS router.routes
BackboneJS collection.unshift()方法
BackboneJS collection.add()方法
BackboneJS collection.models
BackboneJS model.hasChanged()方法
BackboneJS collection.url()方法
BackboneJS Backbone.history.start()方法
BackboneJS model.validate()方法
BackboneJS collection.create()方法
BackboneJS model.parse()方法
BackboneJS事件on
BackboneJS collection.at()方法
BackboneJS事件off
BackboneJS view.$(selector)方法
BackboneJS .sync()方法
BackboneJS collection.sort()函數(shù)
BackboneJS collection.length
BackboneJS model.changedAttributes()方法
BackboneJS model.isValid()方法
BackboneJS model.attributes屬性
BackboneJS collection.reset()方法
BackboneJS model.validationError
BackboneJS model.clear()方法
BackboneJS collection.get(id)方法
BackboneJS model.changed
BackboneJS同步
BackboneJS 集合初始化
BackboneJS collection.fetch()方法
BackboneJS model.sync()方法
BackboneJS Model.extend()方法
BackboneJS model.id屬性
BackboneJS model.urlRoot()方法
BackboneJS路由
BackboneJS事件once
BackboneJS collection.pluck()方法
BackboneJS view.template(data)方法
BackboneJS事件listenTo
BackboneJS collection.where()方法
BackboneJS model.toJSON()方法
BackboneJS Backbone.emulateJSON
BackboneJS Model.initialize()方法
BackboneJS view.$el
BackboneJS事件listenToOnce
BackboneJS model.cid屬性

BackboneJS應(yīng)用

Backbone.js給出了一個(gè)Web應(yīng)用程序的結(jié)構(gòu)，它允許業(yè)務(wù)邏輯和用戶接口邏輯分開。在本章中，我們將討論Backbone.js的應(yīng)用程序?qū)崿F(xiàn)用戶界面的架構(gòu)風(fēng)格。下圖顯示了Backbone.js的架構(gòu)：

Backbone.js Architecture

Backbone.js的體系結(jié)構(gòu)包括以下模塊：

  • HTTP請求
  • 路由
  • 視圖
  • 事件
  • 模型
  • 集合
  • 數(shù)據(jù)源

HTTP 請求

HTTP客戶端發(fā)送一個(gè)HTTP請求消息的形式到服務(wù)器，其中網(wǎng)頁瀏覽器，搜索引擎等行為，如HTTP客戶端。 用戶請求的文件，如文檔，圖像等使用HTTP請求協(xié)議。在上面的圖中，你可以看到，HTTP客戶端使用路由器發(fā)送客戶端的請求。

路由器

它是用于路由客戶機(jī)端應(yīng)用程序，并將它們連接到使用URL的動(dòng)作和事件。它是應(yīng)用程序?qū)ο蟮腢RL表示。該URL由用戶手動(dòng)更改。 URL通過backbone使用，以便它可以理解應(yīng)用程序的狀態(tài)來發(fā)送或呈現(xiàn)給用戶。路由器是一個(gè)機(jī)制能夠復(fù)制URL到達(dá)視圖。當(dāng)Web應(yīng)用程序提供可鏈接，可收藏，可共享的URL在應(yīng)用程序中的重要位置，在路由器是必需的。

另外，在上述圖中，路由器發(fā)送HTTP請求到視圖。 這是當(dāng)應(yīng)用程序需要的路由能力有用的功能。

視圖

Backbone.js的視圖是負(fù)責(zé)從我們的應(yīng)用程序如何并顯示什么，它們不包含HTML標(biāo)記的應(yīng)用。它指定數(shù)據(jù)模型呈現(xiàn)給用戶背后的作法。 視圖是用來反映“你的數(shù)據(jù)模型看起來像？”。該視圖類不知道HTML和CSS什么，每個(gè)視圖可更新當(dāng)獨(dú)立的模型，而無需重新加載整個(gè)頁面的變化。它表示UI在DOM的邏輯塊。

如圖在上述架構(gòu)中，視圖表示用戶界面，負(fù)責(zé)顯示用于通過使用路由器完成用戶請求的響應(yīng)。

事件

事件是一個(gè)應(yīng)用程序的主要部分。它結(jié)合用戶的自定義事件到應(yīng)用程序。它們可以被混合到任意對象，并能夠結(jié)合和觸發(fā)定制事件。您可以使用您所選擇的所需名稱綁定自定義事件。通常情況下，事件則與他們的程序流程同步處理。在上述架構(gòu)，你可以看到，當(dāng)一個(gè)事件發(fā)生時(shí)，它通過使用視圖表示模型的數(shù)據(jù)。

模型

它是檢索和填充數(shù)據(jù)的JavaScript應(yīng)用程序的核心。模型包含的數(shù)據(jù)的應(yīng)用程序和邏輯的數(shù)據(jù)和表示在該框架基本數(shù)據(jù)對象。模型代表了一些業(yè)務(wù)邏輯和業(yè)務(wù)驗(yàn)證業(yè)務(wù)實(shí)體。它主要用于數(shù)據(jù)存儲和業(yè)務(wù)邏輯。它可以從被檢索并保存到數(shù)據(jù)存儲。模型以從通過使用路由器的視圖傳遞的事件的HTTP請求，并從數(shù)據(jù)庫同步的數(shù)據(jù)，并發(fā)送響應(yīng)返回給客戶端。

集合

集合是一組模型，其結(jié)合事件，當(dāng)該模型已在集合中修改。集合包含可在循環(huán)被處理并支持排序和過濾模式列表。 當(dāng)創(chuàng)建一個(gè)集合，我們可以定義模型的集合將不得不隨著屬性的實(shí)例類型。在模型上，這也將在模型集合觸發(fā)任何事件觸發(fā)。

它也需要從視圖，綁定事件請求和數(shù)據(jù)與請求的數(shù)據(jù)同步并發(fā)送響應(yīng)返回給HTTP客戶端。

數(shù)據(jù)源

它是建立一個(gè)數(shù)據(jù)庫從服務(wù)器連接，并包含了從客戶端請求的信息。Backbone.js體系結(jié)構(gòu)的流程可以被描述為示出在下面的步驟：

  • 用戶請求使用路由數(shù)據(jù)，該數(shù)據(jù)的路由應(yīng)用程序使用URL的事件。

  • 該視圖表示模型的數(shù)據(jù)給用戶。

  • 模型和集合檢索和通過結(jié)合自定義事件填充使用從數(shù)據(jù)庫獲取的數(shù)據(jù)。