Inserting HTML code when passing values to templates for given conditions

Question

I have a table I am creating that looks like this:

<table>
<thead>
<tr>
    <th>Value1</th>
    <th>Value2</th>
    <th>Value3</th>
    <th>Value4</th>
</tr>
</thead>
<tbody>
{{#each []}}
<tr>
    <td>{{this.val1}}</td>
    <td>{{this.val2}}</td>
    <td>{{this.val3}}</td>
    <td>{{this.val4}}</td>
</tr>
{{/each}}
</tbody>

I want it to be the case that if val1, for instance, is greater than some value X, it will appear red.

How can I pass HTML into the template once some pre-defined condition - like the above example - is satisfied?

You can't do it with out of the box Handlebars. See http://stackoverflow.com/a/16315366/603369 — Palpatim, Jul 09 '15 at 15:04
possible duplicate of [Logical operator in a handlebars.js {{#if}} conditional](http://stackoverflow.com/questions/8853396/logical-operator-in-a-handlebars-js-if-conditional) — Palpatim, Jul 09 '15 at 15:04
Those are helpful, but I don't want to add conditions to the templates themselves. I am looking more for a means of performing the logic in the background and returning val1 with html. For example: '' + val1 + ''. Is this possible? — nietsnegttiw, Jul 09 '15 at 15:19
In that case, modify your model to populate your array with HTML strings instead of whatever "this.val1" currently is. — Palpatim, Jul 09 '15 at 15:24
this.val1 is just the value of a given attribute of a backbone model. I don't understand what you mean when you say populating your array with HTML strings. If I tried to modify the content of val one with HTML tags, it would display the string as such. — nietsnegttiw, Jul 09 '15 at 15:36

aaronmarruk · Accepted Answer · 2015-07-09T16:04:31.377

Ideally you should be driving this functionality using your models.

You could achieve the desired functionality using Marionette CollectionView. Each model in the collection should look something like:

var Model = Backbone.Model.extend({
  initialize: function(){
    /* On initialize, we call our method to set additional computed properties */
    this.setProperty();
  }
  setProperty: function() {
    if (this.get("someProperty") > x) {
      this.set("className", "css-class")
    }
  } 
});

Then from within your ItemView template you should be able to set the class on your table row item

<tr class="{{this.className}}">
    <td>{{this.val1}}</td>
    <td>{{this.val2}}</td>
    <td>{{this.val3}}</td>
    <td>{{this.val4}}</td>
</tr>

Inserting HTML code when passing values to templates for given conditions

1 Answers1