本篇内容翻译自《Beginning Backbone.js》,原著作者James Sugrue。转载请注明相关信息。
本文内容接上篇博客内容
与服务端交换数据
Backbone模型最后可用的功能集合是与如何从一个提供REST API的服务端读取数据,或将数据发送至该服务端相关。在开始接触Backbone的这个相关机制前,我们首先设置一个简单的后端用以为我们的API调用提供响应。
Node.js服务端后台
既然我们使用了JavaScript,我将概述一下使用Node.js的一个简单的服务端,但你也可以根据你的选择轻松地换成其他REST服务端的实现。由于本书的重点在于客户端,因此我们不会深入地讨论服务端的实现。然而,对于解释如何响应Backbone应用的请求这一目的来说已经够用了。
首先需要从http://nodejs.org上安装Node.js。安装完后,使用NPM包管理器安装express node包,其是一个很小的用于Node.js的web应用框架,通过它可以轻松地运行一个具有REST API的简单服务端。
npm install express
最后,只需将以下代码拷贝到server.js中。从代码中可以看到,它通过http://localhost:8080/books提供了一些简单的端点服务。
/** * 由localhost:8080/books提供的简单API */ var express = require('express'); var app = express(); var bookId = 100; function findBook(id){ for(var i = 0; i < books.length; i++){ if(books[i].id === id){ return books[i]; } } return null; } function removeBook(id){ var bookIndex = 0; for(var i = 0; i < books.length; i++){ if(books[i].id === id){ bookIndex = i; } } books.splice(bookIndex, 1); } app.configure(function(){ //解析由body request提供的JSON对象 app.use(express.bodyParser()); }); var books = [ {id: 98, author: 'Stephen King', title: 'The Shining', year: 1977}, {id: 99, author: 'George Orwell', title: 1949} ]; /** * HTTP GET /books * 应该返回一个books的列表 */ app.get('/books', function(request, response){ response.header('Access-Control-Allow-Origin', '*'); console.log('In GET function'); response.json(books); }); /** * HTTP GET /books/:id * id是你想获取的那本书的唯一标识符 * 应该返回具有指定id的任务,不然的话就是404 */ app.get('/books/:id', function(request, response){ response.header('Access-Control-Allow-Origin', '*'); console.log('Getting a book with id ' + request.paras.id); var book = findBook(parseInt(request.params.id, 10)); if(book === null){ response.send(404); }else{ response.json(book); } }); /** * HTTP POST /books/ * 请求的主体包含了创建的book * 若成功则返回200 */ app.post('/books/', function(request, response){ response.header('Access-Control-Allow-Origin', '*'); var book = request.body; console.log('Saving book with the following structure ' + JSON.stringify(book)); book.id = bookId++; books.push(book); response.send(book); }); /** * HTTP PUT /books/ * id是你想更新的那本书的唯一标识 * 如果具有该id的书不存在则返回404 */ app.put('/books/:id', function(request, response){ response.header('Access-Control-Allow-Origin', '*'); var book = request.body; console.log('Updating Book ' + JSON.stringify(book)); var currentBook = findBook(parseInt(request.params.id, 10)); if(currentBook === null){ response.send(404); }else{ //本地存储book currentBook.title = book.title; currentBook.year = book.year; currentBook.author = book.author; response.send(book); } }); /** * HTTP DELETE /books/ * id是你想删除的那本书的唯一标识 * 如果具有指定id的那本书不存在则返回404 */ app.delete('/books/:id', function(request, response){ console.log('calling delete'); response.header('Access-Control-Allow-Origin', '*'); var book = findBook(parseInt(request.params.id, 10)); if(book === null){ console.log('Could not find book'); response.send(404); }else{ console.log('Deleting ' + request.params.id); removeBook(parseInt(request.params.id, 10)); response.send(200); } response.send(200); }); //为允许CORS请求追加设置 var allowCrossDomain = function(req, response, next){ response.header('Access-Control-Allow-Origin', 'http://localhost'); response.header('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, POST, DELETE'); response.header('Access-Control-Allow-Headers', 'Content-Type'); if('OPTIONS' == req.method){ response.send(200); }else{ next(); } }; app.configure(function(){ app.use(allowCrossDomain); }); //设置app的端口号为8080 app.listen(8080);
在命令行中输入node server.js以启动服务器。这个服务器虽然非常简单,但对于Backbone的持久性调用的正确执行来说已经足够了。
相关推荐
Starting with Models and Collections, you'll learn how to simplify client-side data management and easily transmit data to and from your server. Next, you'll learn to use Views and Routers to ...
Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESTful ...
主要提供了3个东西:1、models(模型) 2、collections(集合) 3、views(视图) backbone.js文件本身很小,压缩后只有5.3KB,作为一个框架级别的核心JS文件,这个数字很可怕。 除此之外,这个JS还必须依赖于另一个JS文件...
它通过Models数据模型进行键值绑定及custom事件处理,通过模型集合器Collections提供一套丰富的API用于枚举功能,通过视图Views来进行事件处理及与现有的Application通过JSON接口进行交互。 简而言之,Backbone是...
Mast带来了来自诸如Knockout和Angular之类的框架的一些更重要的贡献,并允许您使用Backbone Models,Collections和Views来利用它们,并着眼于为中型到大型团队进行切实有效的开发。 它并非旨在取代Angular之类的...
Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESTful ...
Tadpole 是基于backbone.js 构建的项目的样板脚手架。 它旨在通过提供包括强大的生成器、gulp.js 自动化、包管理等开箱即用的样板来启动主干应用程序开发。 包括以下内容: 使用命令行生成器和自动化。 使用和包...
一个Backbone.js和Require.js样板,它促进将JavaScript解耦到模块中,使用Collections / Models和Views将业务逻辑与应用程序逻辑分离,在使用移动框架(jQuery Mobile)的同时在桌面和移动Web版本之间重用JavaScript...
Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESRful JSON接口...
backbone.js提供了一套web开发的框架,通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互....
Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESTful ...
Bookshelf遵从和Backbone.js一样棒的Models和Collections思想,使用相同的模式、命名惯例和哲学构建轻量、易于操控的ORM。如果你已经了解Backbone,你就知道如何使用Bookshelf.示例:var knex = require('knex')...
gem 将包括Backbone.js (带有依赖项)和用于模板化的Handlebars.js 。 包含用于编译 Handlebars 模板并利用 Asset Pipeline 帮助保持您的模板良好和有条理。 它还构建了一个简单的目录结构来帮助组织您的 Backbone...
Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESTful ...
Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESRful JSON接口...
Backbone 为复杂Javascript应用程序提供模型 models 集合 collections 视图 views 的结构 其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数 并通过RESTful JSON接口...
Backbonejs入门教程 Backbone 为复杂Javascript应用程序提供模型 models 集合 collections 视图 views 的结构 其中模型用于绑定键值数据和自定义事件
bbstarter Drupal 主干应用程序的启动器...文件结构 app/ source files css/ js/ models/ backbone models, each as it's own file collections/ backbone collections views/ backbone views app.view.js master view
项目入门模板 配置package.json并安装软件包: sudo npm install ...ln -sf ../models ln -sf ../collections 也许更新萨斯 gem update sass 使用Bower软件包? 请参阅.bowerrc文件 bower init ### ### NPM:
║ Dispatcher ║──────>║ Models/Collections ║──────>║ Views ║ ╚════════════╝ ╚════════════════════╝ ╚═══════╝ ^ │ └──────────...