Permalink
Browse files

Merge pull request #1322 from braddunbar/backbone-$

Jettison setDomLibrary in favor of Backbone.$.
  • Loading branch information...
2 parents 020ed10 + dcd1043 commit e34e14c4663c1d946877178aa401f9b6cdc77060 @jashkenas jashkenas committed May 16, 2012
Showing with 46 additions and 87 deletions.
  1. +9 −18 backbone.js
  2. +37 −37 index.html
  3. +0 −31 test/setdomlibrary.js
  4. +0 −1 test/test.html
View
@@ -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.
@@ -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);
}
@@ -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;
},
@@ -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;
@@ -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.
View
@@ -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">
@@ -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 />
@@ -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
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>.
View
@@ -1,31 +0,0 @@
-$(document).ready(function(jQuery) {
-
- // a mock object that looks sufficiently jQuery-ish
- var myLib = function() {
- return {
- attr: function() { return "spam" },
- html: function() { return "spam" },
- hasClass: function() { return "spam" }
- };
- };
-
- var viewAttrs = { id: 'test-setdomlibrary', className: 'test-setdomlibrary' }
-
- module("Backbone.setDomLibrary", {
-
- teardown: function() {
- Backbone.setDomLibrary(jQuery);
- }
-
- });
-
- test('Changing jQuery library to custom library', function() {
- Backbone.setDomLibrary(myLib);
- var view = new Backbone.View(viewAttrs);
- ok(view.$el.hasClass('test-setdomlibrary') === 'spam');
- Backbone.setDomLibrary(jQuery);
- var view = new Backbone.View(viewAttrs);
- ok(view.$el.hasClass('test-setdomlibrary'));
- });
-
-});
View
@@ -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>

0 comments on commit e34e14c

Please sign in to comment.