3

我刚开始使用 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"
                            }
                    ]   
            }
    ]

}

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

4

1 回答 1

0

只需取消我认为的 {{#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>

在您的模板中

于 2013-10-09T17:59:06.493 回答