patternjavascriptMinor

Unordered list element via templating

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

unorderedtemplatingviaelementlist

Problem

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


    Hello World

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

Solution

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 :


    Hello World

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


    Hello World

Code Snippets

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

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

Context

StackExchange Code Review Q#29657, answer score: 7

Revisions (0)

No revisions yet.