12
\$\begingroup\$

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;
}
\$\endgroup\$
  • 1
    \$\begingroup\$ How many different height-width-image-combination to you have? Maybe you can put this in some css classes? \$\endgroup\$ – mheinzerling Aug 13 '13 at 12:08
  • \$\begingroup\$ 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. \$\endgroup\$ – Sean Anderson Aug 13 '13 at 15:36
  • 5
    \$\begingroup\$ 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. \$\endgroup\$ – cimmanon Aug 14 '13 at 21:15
7
+50
\$\begingroup\$

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>
\$\endgroup\$
  • \$\begingroup\$ @SeanAnderson, glad to see you are still around and involved in CR. Thanks for accepting this answer. \$\endgroup\$ – Malachi Mar 28 '14 at 14:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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