Question

I was trying out Backbonejs read through couple of docs. It is an MVC
framework for client side. Inside the views we compile a template and
render them(attach them to DOM, or do some manipulation). Backbone has
a dependency of underscore js, which is the templating stuff.

With Bbone, when manipulating views el comes into picture. My
understanding of el is that it references the DOM Object. If no
dom object is assigned to it, it assumes an empty div.

var choose_view = new SearchView({ el: $(“#choose_me”) });

So in the above case, the div with id choose_me will be manipulated,
when the choose_view is invoked. So far so good, but what are the
stuff happening below in chronology, I was unable to get, also is
there any redundancy, read the comments for the queries:

// the div with id search_container will be picked up by el
<div id="search_container"></div>

<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            //1. Compile the template using underscore, QUESTION: **what does this mean**?
            var template = _.template( $("#search_template").html(), {} );
            //2. Load the compiled HTML into the Backbone "el"
            this.el.html( template );
        }
    });
    // QUESTION: **When in 2. we have already mentioned, el, can we not over there
    provide the div element?**
    var search_view = new SearchView({ el: $("#search_container") });
</script>

<script type="text/template" id="search_template">
    <label>Search</label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>

Answer 1

Question 1

Compiling template means that you get a template function that you can pass in a data object as argument of the template function. That way, you can evaluate many times your template function with different data objects while it’s compiled only once.

compiledTemplate = _.template( $("#search_template").html());
this.el.html(compiledTemplate(data));
another.el.html(compiledTemplate(otherData));

In the example above you compile your template once, then you use it twice.
In the code you have given, you compile and use your template at the same time

So

_.template( $("#search_template").html()); // Create a template function, the result is a function that you can call with a data object as argument
_.template( $("#search_template").html(), data); // Create a template function and call it directly with the data object provided, the result is a string containing html

Ref: http://underscorejs.org/#template

Question 2

You can provide the div element directly, but el is an helper to retrieve the root element of your view on which all DOM events will be delegated.

As indicated in the backbone doc

If you’d like to create a view that references an element already in
the DOM, pass in the element as an option: new View({el:
existingElement})

Ref: http://backbonejs.org/#View-el