Skip to content

Commit

Permalink
merged gh-pages in.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jashkenas
jashkenas committed Feb 28, 2011
2 parents a5079ab + 52953c1 commit 7216d99
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 25 deletions.
2 changes: 1 addition & 1 deletion backbone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -859,7 +859,7 @@
// For small amounts of DOM Elements, where a full-blown template isn't
// needed, use **make** to manufacture elements, one at a time.
//
// var el = this.make('li', {'class': 'row'}, this.model.get('title'));
// var el = this.make('li', {'class': 'row'}, this.model.escape('title'));
//
make : function(tagName, attributes, content) {
var el = document.createElement(tagName);
Expand Down
Binary file added docs/images/basecamp-mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/instagreat.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/substance.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/tilemill.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
121 changes: 97 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
font-weight: bold;
margin-top: 15px;
}
div.toc_title:hover {
a.toc_title:hover {
text-decoration: underline;
}
#sidebar .version {
Expand All @@ -51,8 +51,12 @@
margin: 0 0 3px 0;
}
.toc_section li a {
text-decoration: none;
color: black;
}
.toc_section li a:hover {
text-decoration: underline;
}
div.container {
position: relative;
width: 550px;
Expand Down Expand Up @@ -83,11 +87,9 @@
}
a, a:visited {
color: #444;
text-decoration: none;
}
a:active, a:hover {
color: #000;
text-decoration: underline;
}
a img {
border: 0;
Expand Down Expand Up @@ -499,9 +501,19 @@ <h2 id="Model">Backbone.Model</h2>

author: function() { ... },

allowedToEdit: function(account) { ... },
coordinates: function() { ... },

coordinates: function() { ... }
allowedToEdit: function(account) {
return true;
}

});

var PrivateNote = Note.extend({

allowedToEdit: function(account) {
return account.owns(this);
}

});
</pre>
Expand Down Expand Up @@ -1106,7 +1118,7 @@ <h2 id="Collection">Backbone.Collection</h2>
Add a model (or an array of models) to the collection. Fires an <tt>"add"</tt>
event, which you can pass <tt>{silent: true}</tt> to suppress. If a
<a href="#Collection-model">model</a> property is defined, you may also pass
raw attributes objects.
raw attributes objects, and have them be vivified as instances of the model.
</p>

<pre class="runnable">
Expand Down Expand Up @@ -1888,27 +1900,77 @@ <h2 id="examples">Examples</h2>
</div>

<p>
The <a href="http://www.documentcloud.org/">DocumentCloud</a> workspace
The <a href="http://www.documentcloud.org/public/#search/">DocumentCloud workspace</a>
is built on Backbone.js, with <i>Documents</i>, <i>Projects</i>,
<i>Notes</i>, and <i>Accounts</i> all as Backbone models and collections.
</p>

<div style="text-align: center;">
<img src="docs/images/dc-workspace.png" alt="DocumentCloud Workspace" class="example_image" />
<a href="http://www.documentcloud.org/public/#search/">
<img src="docs/images/dc-workspace.png" alt="DocumentCloud Workspace" class="example_image" />
</a>
</div>

<p>
<a href="http://bennolan.com/">Ben Nolan</a> created
<a href="http://bennolan.com/2010/11/24/backbone-jquery-demo.html">an example "Backbone Mobile" application</a>, combining Backbone.js
with <a href="http://jquerymobile.com/">jQuery Mobile</a>. You can
<a href="http://bennolan.com/science/backbone-mobile/">try the app</a>
in your browser, or view the
<a href="https://github.com/bnolan/backbone-mobile">source code</a> on Github.
<a href="http://37signals.com/">37Signals</a> used Backbone.js to create
<a href="http://basecamphq.com/mobile">Basecamp Mobile</a>, the mobile version
of their popular project management software. You can access all your Basecamp
projects, post new messages, and comment on milestones (all represented
internally as Backbone.js models).
</p>

<div style="text-align: center;">
<a href="http://bennolan.com/science/backbone-mobile/">
<img src="docs/images/backbone-mobile.png" alt="Backbone Mobile" class="example_image" />
<a href="http://basecamphq.com/mobile">
<img src="docs/images/basecamp-mobile.png" alt="Basecamp Mobile" class="example_image" />
</a>
</div>

<p>
Our fellow
<a href="http://www.newschallenge.org/">Knight Foundation News Challenge</a>
winners, <a href="http://mapbox.com/">MapBox</a>, created an open-source
map design studio with Backbone.js:
<a href="http://mapbox.github.com/tilemill/">TileMill</a>.
TileMill lets you manage map layers based on shapefiles and rasters, and
edit their appearance directly in the browser with the
<a href="https://github.com/mapbox/carto">Carto styling language</a>.
</p>

<div style="text-align: center;">
<a href="http://mapbox.github.com/tilemill/">
<img src="docs/images/tilemill.png" alt="TileMill" class="example_image" />
</a>
</div>

<p>
<a href="http://twitter.com/elliottkember">Elliott Kember</a> and
<a href="http://twitter.com/dizzyup">Hector Simpson</a> built
<a href="http://instagre.at">Insta-great!</a>
- a fun way to explore popular photos and interact with
<a href="http://instagram.com/">Instagram</a> on the web.
Elliott says, "Backbone.js and Coffeescript were insanely useful for
writing clean, consistent UI code and keeping everything modular and
readable, even through several code refactors. I'm in love."
</p>

<div style="text-align: center;">
<a href="http://instagre.at">
<img src="docs/images/instagreat.png" alt="instagre.at" class="example_image" />
</a>
</div>

<p>
<a href="http://www.twitter.com/jamesjyu">James Yu</a> used Backbone.js to
create <a href="http://www.quietwrite.com/">QuietWrite</a>, an app
that gives writers a clean and quiet interface to concentrate on the text itself.
The editor relies on Backbone to persist document data to the server. He
followed up with a Backbone.js + Rails tutorial that describes how to implement
<a href="http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/">CloudEdit, a simple document editing app</a>.
</p>

<div style="text-align: center;">
<a href="http://www.quietwrite.com/">
<img src="docs/images/quietwrite.png" alt="QuietWrite" class="example_image" />
</a>
</div>

Expand Down Expand Up @@ -1936,17 +1998,28 @@ <h2 id="examples">Examples</h2>
</div>

<p>
<a href="http://www.twitter.com/jamesjyu">James Yu</a> used Backbone.js to
create <a href="http://www.quietwrite.com/">QuietWrite</a>, an app
that gives writers a clean and quiet interface to concentrate on the text itself.
The editor relies on Backbone to persist document data to the server. He
followed up with a Backbone.js + Rails tutorial that describes how to implement
<a href="http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/">CloudEdit, a simple document editing app</a>.
Michael Aufreiter is building an open source document authoring and publishing engine: <a href="http://substance.io">Substance</a>.
Substance makes use of Backbone.View and Backbone.Controller, while Backbone plays well together with <a href="http://github.com/michael/data">Data.js</a>, which is used for data persistence.
</p>

<div style="text-align: center;">
<a href="http://www.quietwrite.com/">
<img src="docs/images/quietwrite.png" alt="QuietWrite" class="example_image" />
<a href="http://substance.io/">
<img src="docs/images/substance.png" alt="Substance" class="example_image" />
</a>
</div>

<p>
<a href="http://bennolan.com/">Ben Nolan</a> created
<a href="http://bennolan.com/2010/11/24/backbone-jquery-demo.html">an example "Backbone Mobile" application</a>, combining Backbone.js
with <a href="http://jquerymobile.com/">jQuery Mobile</a>. You can
<a href="http://bennolan.com/science/backbone-mobile/">try the app</a>
in your browser, or view the
<a href="https://github.com/bnolan/backbone-mobile">source code</a> on Github.
</p>

<div style="text-align: center;">
<a href="http://bennolan.com/science/backbone-mobile/">
<img src="docs/images/backbone-mobile.png" alt="Backbone Mobile" class="example_image" />
</a>
</div>

Expand Down

0 comments on commit 7216d99

Please sign in to comment.