Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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.

What this isn't

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.

How to use Backbone.Native

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.

Major differences between jQuery and Native APIs

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.

jQuery Collection behavior

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));

Selector limitations

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.

  1. Selectors beginning with > are not supported, so developers must take possible child views into account when writing selectors.

  2. Selectors do not have to match entirely within their context element. For example


    If div is view.el, a selector such as body span would match span even though body is a parent of the view element.

Event 'currentTarget'

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.


Copyright and License

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

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.


A tiny drop-in replacement for jQuery to allow Backbone to work.







No releases published


No packages published