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部分：模型