Passing undifined to Handlebars.compile

Question

I just started with Handlebars.js and running into a small problem

I'm using version 1.0.0 width data I get from JSON via jQuery. Everything works fine, my data gets pulled through to the template and the data gets displayed like expected, however I keep getting this error.

Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined

When I log source in the console I get this, I know it's not a string but this is what this tutorial explains http://javascriptplayground.com/blog/2012/05/javascript-templating-handlebars-tutorial/. Am I wrong?

{{#sets}}
<li class="products">
    <h1>{{title}}</h1>
    <img src="{{img}}">
</li>
{{/sets}}

Here is the rest of it

HTML

<div id="sets-template-inner" class="show-for'small">
        <div class="slideshow-wrapper">
            <div class="preloader"></div>
            <ul data-orbit> 
                <script id="full-sets-template-mobile" type="text/x-handlebars-template">
                        {{#sets}}
                            <li class="products">
                                <h1>{{title}}</h1>
                                <img src="{{img}}">
                            </li>
                        {{/sets}}
                </script>
            </ul>
        </div>
    </div>

jQuery

function getProductsSets() {
  $.getJSON('products/products.json', {
      format: "json"
    }).done(function(json) {
      $.each(json.sets, function() {
        var source = $('#full-sets-template-mobile').html();
        console.log(source)
        var template = Handlebars.compile(source);
        var data = template(json);
        var html = $('#sets-template-inner').html(data);
      });
    }).fail(function() {
      console.log('failed');
    });
}

JSON

{
    "sets":
    [
            {
                    "title": "raw bones",
                    "img": "img/sets/set1.jpg",
                    "desc": "Raw pine table with 2 chairs and a bench.",
                    "base": 1200,
                    "seating":
                    [
                            {
                                    "price": 0,
                                    "name": "4 seater"
                            },
                            {
                                    "price": 400,
                                    "name": "6 seater"
                            },
                            {
                                    "price": 800,
                                    "name": "8 seater"
                            }
                    ]
            },
            {
                    "title": "sky blue",
                    "img": "img/sets/set1.jpg",
                    "desc": "Raw pine table with 2 chairs and a bench",
                    "base": 1300,
                    "seating":
                    [
                            {
                                    "price": 0,
                                    "name": "4 seater"
                            },
                            {
                                    "price": 500,
                                    "name": "6 seater"
                            },
                            {
                                    "price": 800,
                                    "name": "8 seater"
                            }
                    ]   
            }
    ]                

}

Hope I have enough info here and thanks for any help.

Answer 1

just do away with the {{#sets}} {{/sets}} I think. You're jquery is already breaking the object down to each set. so all you need is

<script id="full-sets-template-mobile" type="text/x-handlebars-template">
    <li class="products">
        <h1>{{title}}</h1>
        <img src="{{img}}">
    </li>
</script>

in your template