Search code examples
backbone.js

Does Backbone.js have a hard dependency on jQuery?


According to backbone js website:

Backbone's only hard dependency is Underscore.js ( > 1.3.1). For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include json2.js, and either jQuery (1.4.2) or Zepto.

I tested with code below, removing jQuery and the Backbone view throws an error.

<html>
<head>
    <title>asda</title>


    <!--<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
    <script src="http://documentcloud.github.com/underscore/underscore.js"></script>
    <script src="http://documentcloud.github.com/backbone/backbone.js"></script>            
    <script type="text/javascript" charset="utf-8" async defer>
        SearchView = Backbone.View.extend({
            initialize: function(){
                alert("Alerts suck.");
            }
        });

        // The initialize function is always called when instantiating a Backbone View.
        // Consider it the constructor of the class.
        var search_view = new SearchView;
    </script>   
</head>
<body>

</body>
</html>

How can Backbone.View and Backbone.Router work without jQuery?


Solution

  • While Backbone.View does depend on a DOM manipulation library, ie you can't use vanilla javascript that is not organized in to a library of some sort, you can configure Backbone to use whatever library you'd like.

    See the following from the Backbone source:

    // 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;
    };
    

    Calling this method will allow you to use whatever library you want.

    For example:

    Backbone.setDomLibrary(myCustomLibrary);