Backbone.js 样例站点与入门指南

本文的来源

• 前段时间，我的工作中开始接触到 Backbone.js 这个开源框架，于是我就在网上搜索了下相关资料开始学习，结果找来找去，发现这些资料都不够全面，都是只涉及到关键点的一部分，只有这里的资源是最全面也 最权威，然而，在下的母语并不是英语，英文文档阅读起来略显吃力，而自己又不能不看，而且我注意到这里的文章都是可以自行编辑的，于是，我就想，为什么不 把这篇文章翻译出来，在方便自己查阅的同时也方便后来的中文用户。于是，就有了这篇文章的诞生。不过由于我不是专业的翻译，所以文章中可能会有些地方表达 不恰当，如果你遇到了，请协助我壹起将其修正，不胜感激！本文英文原文在：https://github.com/documentcloud/backbone/wiki/Tutorials,-blog-posts-and-example-sites
• 我的联系方式
  • Email: hanmiao3 (at) gmail.com，推荐用邮件，每天会不定时查看。
  • MSN: hanmiao3 (at) gmail.com，工作时间在线。

Todo 应用

• 入门指南： http://jgn.heroku.com/2010/10/25/creating-localtodoscom----a-short-story/
• 效果演示： http://localtodos.com/
• 源代码： https://github.com/jeromegn/localtodos
• 源代码（原型）： http://documentcloud.github.com/backbone/docs/todos.html
• CoffeeScript 版本（与原型）： https://github.com/JasonGiedymin/backbone-todojs-coffeescript

Strut - 壹个由 Matt Crinklaw 开发的 ImpressJS 图形交互界面

• 效果演示： http://tantaman.github.com/Strut/web/index.html
• 源代码： https://github.com/tantaman/Strut

Ostio — 供 GitHub 项目使用的开源论坛

• 效果演示： http://ost.io
• 源代码： https://github.com/paulmillr/ostio

由 Christophe Coenraets 开发的员工指南应用

• Backbone.js + Twitter Bootstrap 版本
• 移动版本： Backbone.js + jQuery Mobile
• 移动版本： Backbone.js + native-looking iPhone skin
• 源代码： https://github.com/ccoenraets/backbone-directory

使用 Node JS, MongoDB 开发的员工指南应用－－基于 user-agent 字符串的服务于网站、手机或者 iPhone 的版本

• 样例展示： http://nodebackbone-vinkaga.dotcloud.com/
• 源代码： https://github.com/vinkaga/node-backbone

由 Al B 开发的密码锁－－与同事们共享密码，使用了 Django, Django REST 框架以及 backbone.js

• 入门指南： http://10kblogger.wordpress.com/2012/05/25/a-restful-password-locker-with-django-and-backbone-js/
• 源代码： https://github.com/boosh/pwlocker

由 James Yu 开发的云端编辑器

• 入门指南： 第壹部分 , 第二部分
• 样例展示： http://cloudedit.jamesyu.org/
• 源代码： https://github.com/jamesyu/CloudEdit

由 Dan Grossman 开发的 Bookmarkly

• 样例展示： http://bookmarkly.com/
• 源代码： https://github.com/dangrossman/Bookmarkly

由 Fatih Erikli 开发的 ScrumBoard

• 样例展示： http://scrumboard.herokuapp.com
• 源代码： https://github.com/fatiherikli/scrumboard

由 Christophe Coenraets 开发的酒窖应用

• 入门指南： 第壹部分：入门指南, 第二部分：增删查改, 第三部分：深度链接与应用状态
• 样例展示： http://www.coenraets.org/backbone-cellar/part3/
• 源代码： https://github.com/ccoenraets/backbone-cellar

由 Ben Nolan 开发的 Backbone 手机版样例

• 入门指南： http://bennolan.com/2010/11/24/backbone-jquery-demo.html
• 样例展示： http://bennolan.com/science/backbone-mobile/
• 源代码： https://github.com/bnolan/backbone-mobile

由 Addy Osmani 开发的 Backbone Gallery

• 入门指南： http://addyosmani.com/blog/building-spas-jquerys-best-friends/
• 样例展示： http://addyosmani.com/resources/backbonegallery/index.php
• 源代码： https://github.com/addyosmani/backbonejs-gallery

由 Serdar Yildirim 开发的 Facebook 新闻阅读器应用

• 入门指南： http://serdaryildirim.net/js/backbone-js-facebook-news-feed-example.html
• 源代码： https://github.com/serdary/backbone-facebook-newsfeed

nodechat.js – 使用 node.js, backbone.js, socket.io 与 redis 创建壹个实时的聊天程序

• 入门指南： http://fzysqr.com/2011/02/28/nodechat-js-using-node-js-backbone-js-socket-io-and-redis-to-make-a-real-time-chat-app/
• 源代码： https://github.com/jslatts/nodechat

Backbone, Express, Mongoose 与 SocketIO

• 源代码： https://github.com/datapimp/backbone-express-mongoose-socketio

午餐颜色

• 样例展示： http://brunch-colors.com/
• 源代码： https://github.com/janmonschke/Brunch-colors/tree/master/_attachments/brunch/src/app

Grizzly - 壹个仅仅使用了 backbone.js 与 couchdb 的 Google wave 克隆

• 源代码： https://github.com/pyronicide/backbone.couchdb.js/tree/master/examples/grizzly

炸弹人 - 壹个使用了 backbone.js, node.js, socket.io, sass, canvas 制作出来的多玩家炸弹人游戏克隆

• 样例展示： http://bit.ly/html5bomb
• 源代码： https://github.com/cri5ti/html5-bomberman

非常简单的 backbone 网站样例

• 样例展示： http://beyondtheclouds.net/Projects/backboneapp
• 源代码： https://github.com/L0stSoul/Training/tree/master/Backboneapp

Backbone.sync 同步样例

• Backbone.sync + 本地存储： 每个 key 指向壹个 model
  • 源代码： https://github.com/k33g/ossicle/blob/master/js/backbone.sync/backbone-sync-localstorage.js
  • 例子： https://github.com/k33g/ossicle/blob/master/index-bb-localstorage.html
• Backbone.sync + GitHub API ：从你的 GitHub 资源库中读取 markdown 文件
  • 源代码： https://github.com/k33g/ossicle/blob/master/js/backbone.sync/backbone-sync-github.js
  • 例子： https://github.com/k33g/ossicle/blob/master/index-bb-github-api.html

Backbone 绞死的人

• 样例展示： http://backbone-hangman.heroku.com/
• 源代码： https://github.com/trivektor/Backbone-Hangman
• 入门指南： http://trivektor.wordpress.com/2012/01/15/redo-the-classic-hangman-game-with-a-new-approach-backbone-js/

入门指南与博客发布

• Backbone on Rails 第壹部分 - http://railscasts.com/episodes/323-backbone-on-rails-part-1
• Backbone on Rails 第二部分 - http://railscasts.com/episodes/325-backbone-on-rails-part-2
• Backbone 基本原理 （壹本开源的图书） https://github.com/addyosmani/backbone-fundamentals
• 第壹部分：Backbone.js + Require.js – http://developer.teradata.com/blog/jasonstrimpel/2011/12/part-1-backbone-js-require-js
• 第二部分：Backbone.js + Require.js, 进壹步模块化与实时依赖性载入 – http://developer.teradata.com/blog/jasonstrimpel/2012/01/part-2-backbone-js-require-js-further-modularization-and-just-in-time-dep
• Backbone.js 与 socket.io – http://developer.teradata.com/blog/jasonstrimpel/2011/11/backbone-js-and-socket-io
• 使用模块组织你的 Backbone.js 应用程序 – http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules
• Backbone 与 jquery mobile – http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html
• 使用 Jasmine 与 Sinon 测试 Backbone 应用 – http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html
• 在服务器上重用 Backbone.js 模块与 Node.js 和 Socket.io 创建实时应用程序 － http://andyet.net/blog/2011/feb/15/re-using-backbonejs-models-on-the-server-with-node/
• 如何与 Node.js 共享 Backbone.js 模块 – http://amir.unoc.net/how-to-share-backbonejs-models-with-nodejs
• 介绍 Backbone 存储 – http://www.elfsternberg.com/2011/08/08/backbone-store-version-20-regular-edition/
• 介绍 Backbone 存储
  • Coffeescript 版本 － http://www.elfsternberg.com/2011/08/22/backbone-store-version-20-backbonejs-coffeescript-haml-stylus-edition/
  • 样例展示：http://elfsternberg.com/projects/backbone_store/
• 使用 Sinatra 做后端的 Backbone.js 应用程序 – http://ryandotsmith.heroku.com/2010/10/a-backbone-js-demo-app-sinatra-backend.html
• LiquidMedia - 壹个 Backbone.js 的简单介绍
  • 第1部分：http://liquidmedia.ca/blog/2011/01/backbone-js-part-1/
  • 第2部分：http://liquidmedia.ca/blog/2011/01/an-intro-to-backbone-js-part-2-controllers-and-views/
  • 第3部分：http://liquidmedia.ca/blog/2011/02/backbone-js-part-3/
• Backbone-CouchDB - 给你的 CouchDB 应用程序壹些 Backbone – http://janmonschke.posterous.com/backbone-couchdb-give-your-couchapp-some-back
• 这些天的博文中的壹篇 - Backbone.js – http://www.oneofthesedaysblog.com/backbone-js/
• Backbone.js 与 Django – http://joshbohde.com/2010/11/25/backbonejs-and-django/
• 元数据云 - Backbone.js 入门指南 – http://www.plexical.com/blog/2010/11/18/backbone-js-tutorial/
• 转向 Backbone.js 与 JQuery 模板 – http://www.akshay.cc/2010/10/moved-to-backbonejs-and-jquery.html
• Building a Single-Page App with Backbone.js, Underscore.js and JQuery – andyet.net
• eCloudEdit - Erlang, WebMachine 与 Backbone.js
  • 第壹部分：http://blog.erlware.org/2011/02/08/ecloudedit-erlang-webmachine-and-backbone-js/
  • 第二部分：http://blog.erlware.org/2011/02/12/ecloudedit-part-2-couchdb/
• Restful Ajax Web 应用程序基础 – http://thomasdavis.github.com/tutorial/making-a-restful-ajax-app.html
• 为小白用户准备的 Backbone.js 入门指南 - http://thomasdavis.github.com/2011/02/01/backbone-introduction.html
• Simple Javascript Inheritance with Backbone.js - blog.usefunnel.com
• Slideshow: Backbone.js Intro backbone-dot-js-intro.heroku.com
• Autocomplete jQuery Plugin using Backbone: planbox.com
• Backbone.js + jQuery = 最好的面向对象的朋友：http://www.coldfusioning.com/index.cfm/2011/1/18/Backbonejs--jQuery--Best-OO-Friends-Example
• Backbone，模型中的接口与事件：http://www.decipherinc.com/n/blog/development-and-engineering-team/2011/04/backbone-api-and-events-models
• Getting Started with Backbone.js net.tutsplus.com
• 来自于 DCRUG 的介绍 Backbone.js 的谈话视频，2011年06月09日
  • Youtube 视频（约30分钟，从08分41秒开始）：http://www.youtube.com/watch?v=VPfMZg-t6ho#t=8m41s
  • PDF 展示：http://files.meetup.com/1397868/intro_to_backbone.pdf
• Hello Backbone.js: arturadib.com
• Hello Backbone.js in CoffeeScript: hello-backbonejs
• Backbone.js and dependent selects: railsindirection.blogspot.com
• Backbone.js todo's example. This one combines backbone with jquery, handlebars, jammit and rails 3. http://github.com/rx/backbone-todos
• Knockout.js 与 Backbone.js 的对比： http://ifandelse.com/?p=61
• 在 Stack Overflow 网站上的 backbone.js 标签：http://stackoverflow.com/questions/tagged/backbone.js
• Backbone 与 MVC
  • 图片展示：http://blog.paracode.com/2011/08/23/image-gallery-with-backbone/
  • 深入讨论：http://blog.paracode.com/2011/08/28/backbone-image-gallery---diving-in/
  • CoffeeScript's Fat Arrow & Backbone http://blog.paracode.com/2011/08/28/coffeescript-fat-arrows/
• 级联选择框与 Backbone.js: 手把手指南 - http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js
• 使用 Backbone.js 与 FullCalendar 创建壹个共享的日历：手把手指导 - http://blog.shinetech.com/2011/08/05/building-a-shared-calendar-with-backbone-js-and-fullcalendar-a-step-by-step-tutorial/
• 如何使用 Backbone.js 切换视图 – http://blog.viison.com/post/11097185009/how-to-switch-views-using-backbonejs
• Backbone.js 截屏 - 介绍与查看 - http://joeybeninghove.com/2011/08/16/backbone-screencast-introduction-views

其它语言

俄语

• 俄罗斯版本的 Backbone.js 文件： backbonejs.ru
• 使用 Backbone.js 编写复杂的接口： habrahabr.ru

法语

• MON 1ER TUTO BACKBONE.JS (AVEC ZEPTO) & Backbone.js, on continue
• "BackBone par le bon bout" :
  • 第壹部分： Backbone.Model + Backbone.Collection
  • 第二部分： Backbone.sync
  • 第三部分： Backbone.View
  • 第四部分： Backbone.Router
• 组织骨干模块的JS代码
  • 效果演示

葡萄牙语

• Backbone.js 系列：
  • 第1部分：简介
  • 第2部分：视图
  • 第3部分：模型