Backbone.Native is a substitute for jQuery meant to allow Backbone to function with the minimum possible amount of extra code. It allows sites that do not wish to use the functionality of jQuery to use Backbone and rely on the functionality of JavaScript and the standard DOM APIs.
This is not a drop-in replacement for all of jQuery. The goal of this project is to keep the code as simple as possible and implement the minimum amount of functionality required to use Backbone without sizable external dependencies. This library is only about 4% of the size of jQuery.
Simply drop backbone.native.min.js into a page after Backbone has been loaded and it will
automatically set itself up with Backbone, and create $ and Backbone.Native.
The goal of this library is to keep the code as simple as possible while preserving Backbone's core functionality. The only jQuery-like functionality provided are the parts that are strictly needed for Backbone to function.
Internally Backbone only treats this.el and this.$el as single elements, so none of jQuery's
collection logic has been implemented. Support for this.$(...) child selection has explicitly
not been implemented because of this. It is expected that instead users will make use of
querySelectorAll.
// Instead of this
this.$('.child').each(function(i, el){
// Use this
_.forEach(this.el.querySelectorAll('.child'), function(el, i){
This is meant to avoid confusion around the return value of this.$ not being an object, but
you can always add this to your View base class to shorten it, accepting that you will only
have standard Array functionality.
$: function(sel){
return _.toArray(this.el.querySelectorAll(sel));
}
Selectors must be compatible with querySelector, which leads to two primary changes in
selector behavior. For more details, see
John Resig's blog post on the subject.
-
Selectors beginning with
>are not supported, so developers must take possible child views into account when writing selectors. -
Selectors do not have to match entirely within their context element. For example
<html> <body> <div> <span></span> </div> </body> </html>If
divisview.el, a selector such asbody spanwould matchspaneven thoughbodyis a parent of the view element.
Users of jQuery will expect event.currentTarget to contain the target element, whether using
standard event binding, or event delegation. This library does not provide its own fake Event
API, and thus 'currentTarget' will always be the view.el. To work around this while still
providing an easy to use API, the element matched by event delegation is returned as the second
argument to all event handlers.
events: {
'click .child': 'clickChildEvent'
},
clickChildEvent: function(event, childElement){
// Use childElement instead of event.currentTarget
}
The $.ajax implementation only covers the basic cases (pull requests accepted!). A Deferred
object is also not returned from the AJAX request, so developers must rely on the standard
success and error callbacks.
$.ready has not been implemented, instead deferring to the DOMContentLoaded event.
document.addEventListener('DOMContentLoaded', function(){
// Code to run when the DOM has loaded.
}, false);
This library supports any browser that provides ECMAScript 5, querySelector(All), matchesSelector (w/ prefixes) and XHR2.
That translates roughly to:
- Chrome
(>= 8.0) - FireFox
(>= 4.0) - Safari
(>= 5.1) - IE
(>= 10)
It has been tested with Backbone v0.9.2 and v1.0.0.
Some simple examples are available in the examples directory. They are simple comparisons demonstrating how code could be written with jQuery vs with Backbone.Native.
- Logan F Smyth (@loganfsmyth)
Copyright 2013 Inkling Systems, Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.