Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request jashkenas#1322 from braddunbar/backbone-$
Jettison setDomLibrary in favor of Backbone.$.
  • Loading branch information
jashkenas committed May 16, 2012
2 parents 020ed10 + dcd1043 commit e34e14c
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 87 deletions.
27 changes: 9 additions & 18 deletions backbone.js
Expand Up @@ -38,16 +38,7 @@
if (!_ && (typeof require !== 'undefined')) _ = require('underscore');

// For Backbone's purposes, jQuery, Zepto, or Ender owns the `$` variable.
var $ = root.jQuery || root.Zepto || root.ender;

// Set the JavaScript library that will be used for DOM manipulation and
// Ajax calls (a.k.a. the `$` variable). By default Backbone will use: jQuery,
// Zepto, or Ender; but the `setDomLibrary()` method lets you inject an
// alternate JavaScript library (or a mock library for testing your views
// outside of a browser).
Backbone.setDomLibrary = function(lib) {
$ = lib;
};
Backbone.$ = root.jQuery || root.Zepto || root.ender;

// Runs Backbone.js in *noConflict* mode, returning the `Backbone` variable
// to its previous owner. Returns a reference to this Backbone object.
Expand Down Expand Up @@ -1017,16 +1008,16 @@
var oldIE = (isExplorer.exec(navigator.userAgent.toLowerCase()) && (!docMode || docMode <= 7));

if (oldIE && this._wantsHashChange) {
this.iframe = $('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;
this.iframe = Backbone.$('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;
this.navigate(fragment);
}

// Depending on whether we're using pushState or hashes, and whether
// 'onhashchange' is supported, determine how we check the URL state.
if (this._hasPushState) {
$(window).bind('popstate', this.checkUrl);
Backbone.$(window).bind('popstate', this.checkUrl);
} else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) {
$(window).bind('hashchange', this.checkUrl);
Backbone.$(window).bind('hashchange', this.checkUrl);
} else if (this._wantsHashChange) {
this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
}
Expand Down Expand Up @@ -1060,7 +1051,7 @@
// Disable Backbone.history, perhaps temporarily. Not useful in a real app,
// but possibly useful for unit testing Routers.
stop: function() {
$(window).unbind('popstate', this.checkUrl).unbind('hashchange', this.checkUrl);
Backbone.$(window).unbind('popstate', this.checkUrl).unbind('hashchange', this.checkUrl);
clearInterval(this._checkUrlInterval);
History.started = false;
},
Expand Down Expand Up @@ -1201,16 +1192,16 @@
//
make: function(tagName, attributes, content) {
var el = document.createElement(tagName);
if (attributes) $(el).attr(attributes);
if (content != null) $(el).html(content);
if (attributes) Backbone.$(el).attr(attributes);
if (content != null) Backbone.$(el).html(content);
return el;
},

// Change the view's element (`this.el` property), including event
// re-delegation.
setElement: function(element, delegate) {
if (this.$el) this.undelegateEvents();
this.$el = (element instanceof $) ? element : $(element);
this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
this.el = this.$el[0];
if (delegate !== false) this.delegateEvents();
return this;
Expand Down Expand Up @@ -1371,7 +1362,7 @@

// Set the default implementation of `Backbone.ajax` to proxy through to `$`.
Backbone.ajax = function() {
return $.ajax.apply($, arguments);
return Backbone.$.ajax.apply(Backbone.$, arguments);
};

// Wrap an optional error callback with a fallback error event.
Expand Down
74 changes: 37 additions & 37 deletions index.html
Expand Up @@ -342,8 +342,8 @@
Utility
</a>
<ul class="toc_section">
<li><a href="#Utility-noConflict">noConflict</a></li>
<li><a href="#Utility-setDomLibrary">setDomLibrary</a></li>
<li><a href="#Utility-Backbone-noConflict">Backbone.noConflict</a></li>
<li><a href="#Utility-Backbone-$">Backbone.$</a></li>
</ul>

<a class="toc_title" href="#examples">
Expand Down Expand Up @@ -1654,7 +1654,7 @@ <h2 id="Collection">Backbone.Collection</h2>
<br />
Returns a new instance of the collection with an identical list of models.
</p>

<p id="Collection-fetch">
<b class="header">fetch</b><code>collection.fetch([options])</code>
<br />
Expand Down Expand Up @@ -2375,10 +2375,10 @@ <h2 id="View">Backbone.View</h2>
or remove a view from the DOM temporarily.
</p>

<h2 id="Utility">Utility Functions</h2>
<h2 id="Utility">Utility</h2>

<p id="Utility-noConflict">
<b class="header">noConflict</b><code>var backbone = Backbone.noConflict();</code>
<p id="Utility-Backbone-noConflict">
<b class="header">Backbone.noConflict</b><code>var backbone = Backbone.noConflict();</code>
<br />
Returns the <tt>Backbone</tt> object back to its original value. You can
use the return value of <tt>Backbone.noConflict()</tt> to keep a local
Expand All @@ -2391,12 +2391,12 @@ <h2 id="Utility">Utility Functions</h2>
var model = localBackbone.Model.extend(...);
</pre>

<p id="Utility-setDomLibrary">
<b class="header">setDomLibrary</b><code>Backbone.setDomLibrary(jQueryNew);</code>
<p id="Utility-Backbone-$">
<b class="header">Backbone.$</b><code>Backbone.$ = $;</code>
<br />
If you have multiple copies of <tt>jQuery</tt> on the page, or simply want
to tell Backbone to use a particular object as its DOM / Ajax library,
this is the function for you.
this is the property for you.
</p>

<h2 id="examples">Examples</h2>
Expand Down Expand Up @@ -2447,15 +2447,15 @@ <h2 id="examples-documentcloud">DocumentCloud</h2>
<h2 id="examples-rdio">Rdio</h2>

<p>
<a href="http://rdio.com/new">New Rdio</a> was developed from the ground
up with a component based framework based on Backbone.js. Every component
on the screen is dynamically loaded and rendered, with data provided by the
<a href="http://developer.rdio.com/">Rdio API</a>. When changes are pushed,
every component can update itself without reloading the page or interrupting
the user's music. All of this relies on Backbone's views and models,
and all URL routing is handled by Backbone's Router. When data changes are
signaled in realtime, Backbone's Events notify the interested components
in the data changes. Backbone forms the core of the new, dynamic, realtime
<a href="http://rdio.com/new">New Rdio</a> was developed from the ground
up with a component based framework based on Backbone.js. Every component
on the screen is dynamically loaded and rendered, with data provided by the
<a href="http://developer.rdio.com/">Rdio API</a>. When changes are pushed,
every component can update itself without reloading the page or interrupting
the user's music. All of this relies on Backbone's views and models,
and all URL routing is handled by Backbone's Router. When data changes are
signaled in realtime, Backbone's Events notify the interested components
in the data changes. Backbone forms the core of the new, dynamic, realtime
Rdio web and <i>desktop</i> applications.
</p>

Expand All @@ -2475,7 +2475,7 @@ <h2 id="examples-linkedin">LinkedIn Mobile</h2>
The app also uses <a href="http://zeptojs.com/">Zepto</a>,
<a href="http://underscorejs.org/">Underscore.js</a>,
<a href="http://sass-lang.com/">SASS</a>, <a href="http://cubiq.org/iscroll">iScroll</a>,
HTML5 LocalStorage and Canvas. The tech team blogged about
HTML5 LocalStorage and Canvas. The tech team blogged about
<a href="https://engineering.linkedin.com/mobile/linkedin-ipad-using-local-storage-snappy-mobile-apps">their experiences using LocalStorage</a>
to improve mobile performance.
</p>
Expand Down Expand Up @@ -2593,15 +2593,15 @@ <h2 id="examples-do">Do</h2>
<img src="docs/images/do.png" alt="Do" class="example_image" />
</a>
</div>

<h2 id="examples-pitchfork">Pitchfork</h2>

<p>
<a href="http://pitchfork.com/">Pitchfork</a> uses Backbone.js to power
its site-wide audio player, <a href="http://pitchfork.com/tv/">Pitchfork.tv</a>,
location routing, a write-thru page fragment cache, and more. Backbone.js
(and <a href="http://underscorejs.org/">Underscore.js</a>) helps the team
create clean and modular components,
<a href="http://pitchfork.com/">Pitchfork</a> uses Backbone.js to power
its site-wide audio player, <a href="http://pitchfork.com/tv/">Pitchfork.tv</a>,
location routing, a write-thru page fragment cache, and more. Backbone.js
(and <a href="http://underscorejs.org/">Underscore.js</a>) helps the team
create clean and modular components,
move very quickly, and focus on the site, not the spaghetti.
</p>

Expand All @@ -2610,7 +2610,7 @@ <h2 id="examples-pitchfork">Pitchfork</h2>
<img src="docs/images/pitchfork.png" alt="Pitchfork" class="example_image" />
</a>
</div>

<h2 id="examples-walmart">Walmart Mobile</h2>

<p>
Expand Down Expand Up @@ -2874,15 +2874,15 @@ <h2 id="examples-grove">Grove.io</h2>
<img src="docs/images/grove.png" alt="Grove.io" class="example_image" />
</a>
</div>

<h2 id="examples-kanogames">KANO/GAMES</h2>

<p>
<a href="http://www.kanoapps.com/">KANO/APPS</a> used Backbone.js to create
<a href="http://www.kanogames.com/">KANO/GAMES</a>, a social gaming website.
KANO/GAMES relies on Backbone.js for almost every aspect of the site:
for seamless page loading, to construct menus, game listings and game
canvases, to build interactive HTML5 avatars, and for
<a href="http://www.kanoapps.com/">KANO/APPS</a> used Backbone.js to create
<a href="http://www.kanogames.com/">KANO/GAMES</a>, a social gaming website.
KANO/GAMES relies on Backbone.js for almost every aspect of the site:
for seamless page loading, to construct menus, game listings and game
canvases, to build interactive HTML5 avatars, and for
user and developer profiles, and live feeds.
</p>

Expand Down Expand Up @@ -2910,14 +2910,14 @@ <h2 id="examples-shortmail">Shortmail</h2>
<img src="docs/images/shortmail.png" alt="Shortmail" class="example_image" />
</a>
</div>

<h2 id="examples-scrollkit">scroll kit</h2>

<p>
<a href="http://scrollkit.com/">scroll kit</a> is a new kind of website
builder that makes designing a web page feel more like drawing.
The workspace is a single-page web application built with Rails and Backbone.js.
In scroll kit, every DOM element is associated with a Backbone model, so that
<a href="http://scrollkit.com/">scroll kit</a> is a new kind of website
builder that makes designing a web page feel more like drawing.
The workspace is a single-page web application built with Rails and Backbone.js.
In scroll kit, every DOM element is associated with a Backbone model, so that
style changes that are made to an element automatically update the model
and propagate the change across all its views.
<a href="http://scrollkit.com/demo">Try it out</a>.
Expand Down
31 changes: 0 additions & 31 deletions test/setdomlibrary.js

This file was deleted.

1 change: 0 additions & 1 deletion test/test.html
Expand Up @@ -19,7 +19,6 @@
<script src="view.js"></script>
<script src="sync.js"></script>
<script src="speed.js"></script>
<script src="setdomlibrary.js"></script>
</head>
<body>
<div id="qunit"></div>
Expand Down

0 comments on commit e34e14c

Please sign in to comment.