在循环中引用车把变量答案

【问题标题】：Referencing handlebars variable in a loop在循环中引用车把变量
【发布时间】：2015-06-14 22:43:24
【问题描述】：

我正在尝试使用已编译的模板在 Handlebars 中构建一些下拉菜单，但它无法访问我的变量：

车把：

{{#each options}}
<div class="control-group consumables-options">
    <div class="row-fluid">
        <div class="span2">
            {{select 'task_services_options' ../bond_service_request_quantities quantity}}
        </div>
    </div>
</div>
{{/each}}

JS：

var html = Handlebars.templates.service_request_consumable_options({
    bond_service_request_quantities: bond_quantities,
    options: opts
});

其中bond_quantities 和opts 是对象数组。

选择助手来自handlebars-form-helpers，但即使在普通把手中（{{../bond_service_request_quantities.0.text}}）我也会收到错误消息。

未捕获的类型错误：无法读取未定义的属性“1”

【问题讨论】：

标签： javascript handlebars.js

【解决方案1】：

我的回答是我使用了两种不同版本的 Handlebars。该项目有 v2.0.0 但 npm 为编译模板的 grunt 任务安装了 3.0.3。

【讨论】：

【解决方案2】：

您的 Handlebars 模板和 javascript 代码看起来不错。从错误消息来看，变量“bond_quantities”似乎为空。

这是我用来测试您的代码的示例 html 文件。我已经尽量简化了，将预编译好的模板直接添加到页面中，对数据进行硬编码。

<html>

<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script src="handlebars.form-helpers.min.js"></script>

<script>
    (function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['service_request_consumable_options'] = template({"1":function(depth0,helpers,partials,data,blockParams,depths) {

    depths = [];
    depths[1] = data.root;

    return "<div class=\"control-group consumables-options\">\n    <div class=\"row-fluid\">\n        <div class=\"span2\">\n            "
    + this.escapeExpression((helpers.select || (depth0 && depth0.select) || helpers.helperMissing).call(depth0,"task_services_options",(depths[1] != null ? depths[1].bond_service_request_quantities : depths[1]),(depth0 != null ? depth0.quantity : depth0),{"name":"select","hash":{},"data":data}))
    + "\n        </div>\n    </div>\n</div>\n";
},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data,blockParams,depths) {
    var stack1;

  return ((stack1 = helpers.each.call(depth0,(depth0 != null ? depth0.options : depth0),{"name":"each","hash":{},"fn":this.program(1, data, 0, blockParams, depths),"inverse":this.noop,"data":data})) != null ? stack1 : "");
},"useData":true,"useDepths":true});
})();
</script>

<script>
    $(function() {
        HandlebarsFormHelpers.register(Handlebars);

        var bond_quantities = [ {
            value : 1,
            text : 'One'
        }, {
            value : 2,
            text : 'Two'
        } ];

        var opts = [ {
            quantity : 100
        }, {
            quantity : 200
        } ];

        var html = Handlebars.templates.service_request_consumable_options({
            bond_service_request_quantities: bond_quantities,
            options: opts
        });

        $('#target').html(html);
    });
</script>
</head>

<body>
    <div id="target"></div>
</body>

</html>

【讨论】：

不，如果我将它输出到循环之外它工作正常，它就在那里。
我使用车把 v2，这有关系吗？
看起来在 v2 中 depths 参数没有被传递给模板。您可以通过手动设置参数来使模板工作。我将更新示例。