如何添加 "each in" 以在车把中工作

Question

Ember 正在迁移到 non-context switching #each 助手。对于兼容性部分，我需要从原始车把上做同样的事情。

var f = Handlebars.compile("{{#each numbers}}{{this}}{{/each}}");
console.log(f({numbers: [1,2,3]}));
// works

var f2 = Handlebars.compile("{{#each number in numbers}}{{number}}{{/each}}");
console.log(f2({numbers: [1,2,3]}));
// fails

如何让 {{#each number in numbers}} 在 raw handlebars 2.0 中工作？

编辑

在此处添加了赏金，用于基于 https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/ember_compat_handlebars.js 的车把扩展，它为我们提供了……支持。很明显它没有内置在车把中。也很明显 Ember 能够扩展它。

Answer 1

每个助手的非上下文切换是 Ember 中引入的助手，它不是核心 handlebars 库的一部分。您将无法将它与普通的 ol' 车把一起使用。

Answer 2

这说明了如何做到这一点。但请注意，它在编译时需要 stringParams 标志，这会改变所有助手的调用方式，因此这可能会破坏所有其他助手，除非您提供它们的 stringParams 兼容版本。

Handlebars.registerHelper('each', function(localName,inKeyword,contextName,options){
  var list = this[contextName];
  var output = "";
  var innerContext = Object.create(this);
  for (var i=0; i<list.length; i++) {
    innerContext[localName] = list[i];
    output += options.fn(innerContext);
  }
  return output;
});

 var f = Handlebars.compile("{{#each number in numbers}}{{number}}{{/each}}", {
  stringParams: true
});

console.log(f({numbers: [1,2,3]}));

Answer 3

如果我理解正确，我相信这会奏效。

var hbs = "{{#each this}}{{this}}{{/each}}";
var f3 = Handlebars.compile(hbs);
console.log(f3({numbers: [1,2,3]}));
console.log(f3({numbers: [3,2,1]}));

http://jsbin.com/tebayupobu/4/edit

Answer 4

也许您根本不需要实现这一点，因为 Handlebars 正在转向非上下文切换助手的块参数。 Ember 已经在 1.10 Beta 中使用块参数（您可以在 release notes 中阅读块参数）。

您现在可以使用最新版本的 Handlebars 通过新的块参数语法获得非上下文切换：

var f = Handlebars.compile("{{#each numbers}}{{this}}{{/each}}");
console.log(f({numbers: [1,2,3]}));

var f = Handlebars.compile("{{#each numbers as |number|}}{{number}}{{/each}}");
console.log(f({numbers: [1,2,3]}));

控制台：

"123"
"123"

已使用新语法更新 JSBin。

如何添加 "each in" 以在车把中工作

How do you add the "each in" to work in handlebars

javascript

handlebars.js

ember.js