Backbone: mixing html and javascript in template

Question

In this "hello world" example of a Backbone app http://arturadib.com/hello-backbonejs/docs/5.html, the author renders a template inline like this

render: function(){
      $(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
      return this; // for chainable calls, like .render().el
    },

which, although functional, is a bit of an unmanageable html concatenation.

I've seen authors of other Backbone apps set a template in the view using underscore's template function

template: _.template($('#my-template').html()),

and then render it instead of the html

$(this.el).html(this.template(this.model.toJSON()));

I wanted to try this technique with the hello world app, but when I created the template file, I ran into the problem that it wasn't strictly html. As you'll notice it calls functions

 this.model.get('part2')

and the template that I was using as a model (from another author's app, see below) just included html.

Question, What would I need to do to include javascript and html in the same template file so I can make a call to the model?

<script type="text/template" id="item-template">
      <div class="company">
        <div class="display">
          <span class="company-text"></span>
          <span class="company-mood">
            <span class="mood"></span>
          </span>
          <span class="company-destroy"></span>
        </div>
        <div class="edit">
          <input class="company-input" type="text" value="" />
        </div>
      </div>
    </script>

@orangewarp within that example template shown in the OP, I could include arbitrary javascript within <% %> ? does that come out of the box with backbone? — Leahcim
– Leahcim, Commented Sep 20, 2012 at 2:31
It's a part of Underscore, the dependency that Backbone has so if you're using Backbone, you're good with Underscore's templating system. Heck, the _.template() function is an Underscore function. :-) I've included a link in the answer that can help you figure out how it works. — jmk2142
– jmk2142, Commented Sep 20, 2012 at 2:33

jmk2142 · Accepted Answer · 2012-09-20 02:32:46Z

2

See this link Underscore Template for details on what you want to accomplish.

But in general, if you just wanted to interpolate your this.model.get('someAttr'); all you'd need to do is include this in your template.

// Since you call it like this:
$(this.el).html(this.template(this.model.toJSON()));

// Just include this
<div>
    <%= someAttr %>
</div>

You're basically passing in the model attributes object and the underscore template just interpolates the properties of that object. You can pass in anything you want although what you do with the render call is what's probably most common.

answered Sep 20, 2012 at 2:32

jmk2142

8,5813 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Backbone: mixing html and javascript in template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related