Backbone.js and underscore.js are creating messy html

Question

I am using the normal way of creating html bits by combining backbone.js and underscore.js. This is an example from what I use

_.template($('#html-container').html(), this.model.toJSON());

And I append this where I need it. The model in this case is a normal backbone model.

Now the HTML that this ouputs looks like this:

<li _id="4f82f7c3c5de997ad3fd4989" code="61131" unit="100ml" op="11" rp="22" cp="0" id="4f82f7c3c5de997ad3fd4989">

Basically it created a html attribute for each variable in my Model. Is this normal or am I doing something wrong here.

just `<%= code %>`. And the tagName of the view is `li`, so all I want is `

JayC · Accepted Answer · 2012-04-20T00:01:40.880

0

~~Somewhere you should have a line like this.~~

var sometemplate = _.template($('#html-container').html());

That compiles your template into a function that you can pass your model data and generate html like so:

var html =  sometemplate(this.model.toJSON());

You're trying to do it all on one line.. which you could do (not this way though), but it's best to compile the template once, save a reference to that somewhere and refer to it later.

See also http://documentcloud.github.com/underscore/#template

EDIT: and now that I did see it, I see

If you're writing a one-off, you can pass the data object as the second parameter to template in order to render immediately instead of returning a template function.

so that's ok. So, perhaps either you're including more than one latyer off data when your JSONable object is generated (I mean, you have an object within your object or something), or...

edited Apr 20 '12 at 00:01

answered Apr 19 '12 at 23:55

JayC

7,053
2
25
41

This does not solve the problem I am having, just am minor optimization. Either way, I get the same results. In my project I use both ways. I did it in one line to make the question a little shorter. – Saif Bechan Apr 20 '12 at 00:00
Yeah, my bad, lets see what that object looks like that is being returned by `this.model.toJSON()`. – JayC Apr 20 '12 at 00:03
That's not the problem either. Even if I extract the key/value pairs from the model and only use them as data object `{code:..., op:...}` than I still get the same HTML. – Saif Bechan Apr 20 '12 at 00:05
What can I say, you're not giving me much to go on. Somebody else asked you what the #html-container looks like and you haven't provided that. Something is jacked up. Maybe it's the template settings... maybe it's the template itself. Maybe you're using a bad version of underscore or something. Generating html via templates generally isn't this hard! – JayC Apr 20 '12 at 00:13
Could it have something to do with backbone. I populate the fields during a fetch. The fields start off empty, and the `fetch()` populates the fields. As I said, the `html-container` only has `<%= code %>`, nothing more. I only echo out the `var` code. – Saif Bechan Apr 20 '12 at 00:21
2

Besides giving you this jsFiddle I made up http://jsfiddle.net/jfcox/y9eKy/ of a situation like yours but doesn't generate any messy html as far as I know, I'm not sure what to tell you. It seems like I have generated html kinda like that before, but that was the result of a bad template. You also might want to add a pattern to handle escaping properties instead of including them as is, but I don't know that html injection from the model values is what's going on here, so that's maybe something you fix after this. – JayC Apr 20 '12 at 01:16
Thanks for your help. I downloaded the newest version of underscore and the problem is gone. Maybe I had a corrupted file or something. – Saif Bechan Apr 20 '12 at 07:09

Backbone.js and underscore.js are creating messy html

1 Answers1