将 undefined 传递给 Handlebars.compile

Question

我刚刚开始使用 Handlebars.js 并遇到了一个小问题

我正在使用通过 jQuery 从 JSON 获取的 1.0.0 版本宽度数据。一切正常，我的数据被拉入模板并且数据按预期显示，但是我不断收到此错误。

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

当我在控制台中记录源代码时，我得到了这个，我知道它不是一个字符串，但这就是本教程所解释的内容http://javascriptplayground.com/blog/2012/05/javascript-templatating-handlebars-tutorial/。难道我错了？

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

这是剩下的部分

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"
                            }
                    ]   
            }
    ]                

}

希望我在这里有足够的信息，并感谢您的帮助。

Answer 1

我认为只需取消 {{#sets}} {{/sets}} 即可。你的 jquery 已经将对象分解为每组。所以你所需要的就是

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

在你的模板中