1

I'm learning how to use Backbone in a project that I'm working on and have a question about the best practices when it comes to decoupling Views and Templates in Backbone. In particular what is the best use of the dynamically generated View.el and View.$el.

In the documentation it says that the View.el is created from the view's tagName, className, id and attributes properties, if specified. If not, el is an empty div.

Question #1:

In setting the view's attributes, id, and className does this not highly couple the View and the template file to the point that if a designer wanted to adjust the template they would need access to the view?

For example, I have a a jQuery Mobile list where the attributes and class names dictate the look and feel of the list:

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c"
class="ui-btn ui-li ui-li-has-thumb ui-btn-up-c"></li>

If I use the tagName, attributes, and className properties of a Backbone view, then all of this would be stored in the View file and not in the template. Is this not a bad practice or am I missing something?

Question 2

To avoid the above I am:

A. Not using the View.el or related properties (tagName, attributes, etc.) at all and instead putting it directly in the template file.

B. Compiling my template using underscore.template() and injecting it into the View.$el property by calling in my render() function:

View.$el.html(_.template(template, data))

And when it's a root view, passing a target id to the View constructor and in my render function calling:

$(this.target).append(View.$el.html());

Alternatively, if it's a view calling another view:

$("#target_id").append(view.render.$el.html());

Is this an ok approach/practice or is there some other best practice I should be using?

5
  • Why use $(this.el) instead of this.$el? That doesn't make any sense. Aug 8, 2013 at 19:03
  • Because according to the backbone.js documentation this.$el is a cached jQuery object version of the dynamically generated $(this.el). I imagine they can be used interchangeably when you are using .html() as the result is the same. If you were using the dynamic el generation, you wouldn't want to use .html() anyway as it would overwrite the dynamically generated DOM Element. Aug 11, 2013 at 20:54
  • But why add the overhead of computing something that is already cached? Each time you $(this.el), you're building the jQuery wrapper but you already have this.$el so $(this.el) is a waste. Aug 11, 2013 at 23:13
  • That's a good point. Removed my edit. Aug 12, 2013 at 0:55
  • Also note that view's have a setElement method for making sure that el, $el, ... are properly synced and what not so everything should be fine unless something tries to view.el = something. Aug 12, 2013 at 1:20

3 Answers 3

0

1) el is not really for your template (i.e. not before it is rendered) but for binding your view with the DOM. You can pass in a selector to your view by specify el when you define your view

var MyAwesomeView = Backbone.View.extend({
    el: '#some_node',
    ...
});

or when you instantiate your view

var myView = new MyAwesomeView({
  el: '#some_other_node',
  ...
});

You can also pass in $ selector like in @bentrm answer as well, both will give you pretty much the same result.

You can also not specify any selector at all but specify only tagName, className or id. Have a look at this source code snippet: https://github.com/jashkenas/backbone/blob/master/backbone.js#L1092-L1106

For your example, you could have that li as a template and instead of have your view attach to a li you could have it attach to one of your ul or ol

2) I think I have explained A. As for B, have a look at this awesome presentation: http://amy.palamounta.in/2013/04/12/unsuck-your-backbone/

3
  • 1) I understand that el is not really my template, it's just storing the html of my compiled template. I am doing exactly what you said regarding attaching a subview of the li to a ul in a parent template. This doesn't answer my question directly though, but reinforces my thoughts that to use the dynamically generated el HTML object by backbone and set the tagName, className, etc. properties would not allow a designer to change the classes and attributes of el purely in the template. Aug 9, 2013 at 19:54
  • 2) Thanks I took a look at the presentation and it did give me some thoughts on how to improve my code! Aug 9, 2013 at 19:55
  • 1) I guess that would be a yes. So, if you don't want Backbone to restrict how you generate your template don't use dynamically generate el. Simply specify selector for el to the container that you want to inject template into. hope this help...
    – j03w
    Aug 10, 2013 at 1:00
0

It is my understanding that the template can be altered by the designer. You just inject the template into your Backbone-View by e.g. calling the template by it's ID on initialization. Then you render the view by inserting it into a parent container identified by "el" which may be a class or id.

To change the styling of the view you just have to change the template. The logic of the view and it's appearance are separated by that approach.

<script id="templ" type="text/html">
    <li class="fancy-styling">A designer made me.</li>
</script>

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript">
    (function ($) {
        var myView = Backbone.View.extend({

                initialize: function (options) {
                    this.template = options.template;
                },

                render: function () {
                    var compiled = _.template(this.template);
                    this.$el.html(compiled({}));
                    return this;
                }

            }),
            view = new myView({
                el: $('#links'),
                template: $('#templ').html()
            });

        view.render();
    })(jQuery);
</script>

1
  • This is exactly what I'm doing, but your answer doesn't answer my question with regards to using the dynamically generated el by backbone. Aug 9, 2013 at 19:55
0

All of the attributes can be described as functions like so, so you can manipulate it before it's rendered:

var MyView = Backbone.View.extend({
    className: function() {
        return this.options.dynamicClassName + ' always-here';
    },
    id: function() {
        return this.options.dynamicId;
    },
    tagName: function() {
        return this.options.dynamicTagName;
    },
    render: function() {
        return this;
    }
});

var myView = new MyView({
    dynamicClassName: 'test',
    dynamicTagName: 'li',
    dynamicTd: 'blah'
});

You can also just pass in what you want directly without defining it in the View:

var myView = var myView = new MyView({
    className: 'test',
    tagName: 'li',
    id: 'blah'
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.