Use only template to build backbone view

Question

var ItemView = Backbone.View.extend({
    tagName:"li",
    className:"l-item",
    template:_.template("#tpl-list-item"),
    .....
});

var ListView  = Backbone.View.extend({
    render:(){
        this.collection.each(function(model){
            this.$el.append(new ItemView({model:model}).render().$el);
        });
    }
});

<script id="tpl-list-item" type="text/template">
    <div>
        // other markup
    <div>
</script>

As shown once I want to update the representation of the itemview, I will have to check both the js and the template file.

And I prefer to build the view from the template only to avoid set the representation in the code like :

<script id="tpl-list-item" type="text/template">
    <li class="....">
        <div>
            // other markup
        <div>
    </li>
</script>

Is this possible?

Answer 1

You could use setElement to replace the view's el:

setElement view.setElement(element)

If you'd like to apply a Backbone view to a different DOM element, use setElement, which will also create the cached $el reference and move the view's delegated events from the old element to the new one.

In practice, it would look something like this:

var ItemView = Backbone.View.extend({
    template: _.template("#tpl-list-item"),
    render: function() {
        this.setElement(this.template(this.model.toJSON()));
        return this;
    },
    //...
});

and ListView wouldn't need to change.

Demo: https://jsfiddle.net/ambiguous/fs9h6o09/

This approach will end up creating and throwing away a bunch of <div> nodes as the view will create empty <div>s as the el if you don't tell it to do something else via id, className, ... properties. These extra <div>s probably won't make any noticeable difference but you could use some el: '#no-such-id' trickery to avoid them.

Backbone doesn't set that much policy but it really does want to separate the el from what goes inside it. You don't have to follow this but you're going against the grain by doing it your way.