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-templating-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>

模板中的

将undefined传递给Handlebars.compile

1 个答案: