Question

我有一个车把js函数，它将增加位置值，

$(function() {
    var data = {
        names: [
            { name: "Andrew" },
            { name: "Brian" },
            { name: "Charlie" }
        ]
    };

    var positionCounter = 1;
    Handlebars.registerHelper('position', function() {
        return positionCounter++;
    });

    var $output = $('#output');
    var source = $('#template').html();

结果将是：1 Andrew 2 Brian 3 Charlie

再次

下次我跑步时，它将是相同的（1 Andrew 2 Brian 3 Charlie）。但是我需要的是每次我调用该函数时都应该增加。例如：

First execution  : 1 Andrew 2 Brian 3 Charlie
Second execution : 4 Andrew 5 Brian 6 Charlie
Third execution  : 7 Andrew 8 Brian 9 Charlie

怎么可能

Answer 1

如您所见，您的助手工作正常。只需运行以下代码段进行检查即可。

$(document).ready(function () {
  var context = {
        names: [
            { name: "Andrew" },
            { name: "Brian" },
            { name: "Charlie" }
        ]
    };
  var positionCounter = 1;
    Handlebars.registerHelper('position', function() {
        return positionCounter++;
    });
	var source   = $("#sourceTemplate").html();
  var template = Handlebars.compile(source);
  var html    = template(context);
  $("#resultPlaceholder").html(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
<ul>
{{#each names}}
  <li>{{position}} - {{name}}</li>
{{/each}}
</ul>

<ul>
{{#each names}}
  <li>{{position}} - {{name}}</li>
{{/each}}
</ul>

<ul>
{{#each names}}
  <li>{{position}} - {{name}}</li>
{{/each}}
</ul>
</script>
<br/>
<div id="resultPlaceholder">
</div>

handlebarjs计数器在每次调用函数时增加

1 个答案: