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;
}

• mheinzerling: How many different height-width-image-combination to you have? Maybe you can put this in some css classes?
• Sean Anderson: The height/width is being pulled from a customer database. The customer uploads images which fit the dimensions of their racks. So, the height and width could be any size.
• cimmanon: If the images can be any size, it is impractical to use classes. So yes, it would be appropriate to use inline styles for truly dynamic content. Keep in mind that client side languages are slow (eg. you'll have to wait for the image to load to figure out its dimensions), so anything you can do serverside is going to have better performance from the user's perspective.

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>

• Malachi: @SeanAnderson, glad to see you are still around and involved in CR. Thanks for accepting this answer.