Search code examples
backbone.jsunderscore.jsbackbone-viewsunderscore.js-templating

Move if/then logic into view or model or keep in template?


after creating a web app using backbone for an engine design firm, I'm wondering if I should move the "if/then" logic out of the html templates.

To help clarify what I mean, here are two examples that I am currently using in production.

If I move the if/then logic out of the template, I would move it to the view, but I'm not sure if that's the "right" way or "backbone" way of doing things.

Am I making poor design decisions, or is what I've done OK?

Thanks!

Simple Example 1:

In the view:

//m is the model used by the view
return Backbone.View.extend({
    template: _.template(tmpl, null, { variable: 'm' }),

In the template:

 {% if(m.title) { %}
      <h4> {%- m.title %} </h4>
 {% } else { %}
      <h4>Experiment Title Goes Here</h4>
 {% } %}

Complex Example 2:

In the view:

//args are the model attributes passed into the view
initialize: function (args) {
    this.currentEngine = args.currentEngine;
    this.engineDisplay = args.engineDisplay;
    this.engineType = args.engineType;
    this.isCurrent = this.model.isCurrent(this.currentEngine);

},

render: function () {

    this.$el.html(this.template({
    engineDisplay: this.engineDisplay,
    engineType: this.engineType,
    isCurrent: this.isCurrent;

}));

In the template:

 {% if(!engineDisplay) { %}
        {% if (m.isCurrent && (engineType === 'GAS' || engineType === 'ECO')) { %}
            <span>Not Available</span>
        {% } else { %}
            <span>
                    <span>Click here to select</span>
            </span>
        {% } %}
 {% } %}

Solution

  • I think your first implementation was correct. Keep the logic out of the view. The "correct" way, or the "backbone" way is to keep the logic where it needs to be:

    1. the model/collection houses code of "where" the data needs to come from.
    2. the view houses code of "what" it needs to do/display. (what needs to happen if event X happens)
    3. the template should house the code of "how" it needs to be displayed.

    I'm sure im missing stuff.. i'll wait until the comments tells me how wrong i am and then i'll correct it.

    -Sheers