Question

I’m trying to find the best way to render a li-element :

I’ve read that i should never replace this.el

So it seems that i have to unwrap my template in my LiView render() function :

// replace element content with html generated from template
var $rendered = $.tmpl(this.template, this.model.toJSON());
this.el.html($rendered.unwrap().html());

I just get the contents inside the $rendered li, since i should not replace it.

But how should i transfer attributes ?

I tried :

this.el.attr('class', $rendered.attr('class'));
this.el.attr('title', $rendered.attr('title'));

But it replaces attributes… And some (like jQuery ui ui-draggable) could be lost.

All this seems a bit clunky…

Thanks !

Answer 1

I’m not sure I fully grasp what you’re trying to do Olouv, but I’ll have a stab at answering your question regardless 🙂

You have an liView that corresponds to an li dom element
So you need to specify

el: "li"

Do not have an li in your template. Then the result of your render will be

<li>
    contents of template
</li>

Now you want to add attributes to this li element?
Class names are pretty simple, just add the className attribute to your view

className: "ui-draggable myGreatClass ui-corner-all"

If you need to add additional attributes to your root (li) element

$(el).attr("title","your title")

If that doesn’t work for you, and you want to put the li attributes in your template perhaps consider some form of the following:

1. Tolerating HTML of the form:
3. Instead of an liView (list item view), just have a ulView (List view), and put a loop construct in your template