CODEWITHSUNDEEP
jquerybackbone.jshandlebars.js
Justin
Justin

Reputation: 3395

Handlebars & Backbone - backbone html not rendering correctly

I am working on using Handlebars in backbone instead of underscore. I do run into an issue with the rendered template not appending to the actual element I designate.

Model:

ImageApp.Models.Image = Backbone.Model.extend({
defaults: {
    imagePath: '',
    description: 'No description available',
    postedOn: ''
    }
});

View:

 ImageApp.Views.ImageView = Backbone.View.extend({
 tagName: 'ul',

 initialize: function() {
     this.render();  
 },

 render: function() {
     var compiledTemplate = Handlebars.compile($('#imageList-template').html());
     var renderedTemplate = compiledTemplate(this.model.toJSON());

     this.$el.html(renderedTemplate);

    $('#imageList').html(this.el);
 }
});

Template

<script id="imageList-template" type="text/x-handlebars-template">
    <li>
        <img src='{{imagePath}}' title='{{description}} />
    </li>
</script>

I would expect this to produce a unordered list with a single item containing a img element, but instead all it creates is an empty list item. Any one see anything glaring I am doing wrong?

Upvotes: 0

Views: 195

Answers (1)

Tim Hobbs
Tim Hobbs

Reputation: 2017

You are missing a closing single quote after {{description}} that may possibly break the template.

Moved to answer per request (I don't have the ability to move the comment to a question)

Upvotes: 2

Related Questions