系统运维

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

2021-01-15 09:13:47 阅读数 3262 收藏 0

本文的来源

  • 前段时间,我的工作中开始接触到 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部分:模型