Unordered list element via templating

Question

I'm creating an unordered list element in Backbone via Underscore templating:

<ul id="FrontRack" style="
        background-image: url({%= data.get('racks').at(0).get('imageUrls')[0] %});
        height:{%= data.get('racks').at(0).get('pixelHeight') %}px;
        width:{%= data.get('racks').at(0).get('pixelWidth') %}px;
">
    <li>Hello World</li>
</ul>

I'm wondering two things:

• Is setting style still considered bad practice when creating elements through templating?
• Should I be setting the style using jQuery after I generate the HTML from the template? This would be done inside of Backbone's render instead of inside of the template.

Something like:

render: function () {

    this.$el.html(this.template(this.model.toJSON()));
    this.$el('#FrontRack').css({ backgroundImage: ... }); // Example

    return this;
}

Answer 1

Interesting questions.

• Is setting 'style' still considered bad practice when creating elements through templating?

  Only if you cannot reasonably use css classes (which is your case)

• Should I be setting the style using jQuery after I generate the HTML from the template?

  Since you know the height and size prior to generating, you should make this part of the template

Also, this :

<ul id="FrontRack" style="
        background-image: url({%= data.get('racks').at(0).get('imageUrls')[0] %});
        height:{%= data.get('racks').at(0).get('pixelHeight') %}px;
        width:{%= data.get('racks').at(0).get('pixelWidth') %}px;
">
    <li>Hello World</li>
</ul>

Only accesses data under data.get('racks').at(0), so that is what you should provide to the template ( as say, data ), then your template becomes

<ul id="FrontRack" style="
        background-image: url({%= data.get('imageUrls')[0] %});
        height:{%= data.get('pixelHeight') %}px;
        width:{%=  data.get('pixelWidth') %}px; ">
    <li>Hello World</li>
</ul>