车把功能 |帮手还是？

Question

我最终为 svg 图标精灵写了很多东西。

<svg class='icon-x'><use xlink:href='#icon-name'></use></svg>

在 Ember 中，- so / htmlbars / .handlebars --- 我希望我可以创建一个像这样的小函数...

var icon = function($name) {
  return "<svg class='icon-x'><use xlink:href='#icon-" + $name + "'></use></svg>"
};

然后是{{icon 'twitter'}}之类的。

这是要用 "helper?" 还是什么？ {{#icon}}{{twitter}}{{/icon}} 几乎和写整篇文章一样糟糕...如果那样就结束了...

给我指出正确的方向，这样我就可以制作一些小把手 一些东西 - 让代码更简洁。

谢谢。

Answer 1

内联帮助程序听起来很适合您，您描述的冗长语法适用于真正没有必要的块帮助程序。

Ember-CLI（放在app/helpers/icon-helper）

import Ember from "ember";

export default Ember.Handlebars.makeBoundHelper(function(value) {
  return new Handlebars.SafeString("<svg class='icon-x'><use xlink:href='#icon-" + value + "'></use></svg>")
});

那么你应该可以像{{icon-helper 'twitter'}}

那样使用它

如果您没有使用 Ember CLI，那么您可能应该研究一下，但在那之前您可以像这样注册它。

Ember.Handlebars.registerBoundHelper('icon-helper', function(value, options) {
  return new Ember.Handlebars.SafeString("<svg class='icon-x'><use xlink:href='#icon-" + value + "'></use></svg>");
});

JSBin 示例：http://emberjs.jsbin.com/vexelodape/1/

Answer 2

这是我让它工作的唯一方法。

i-con.js

import Ember from "ember";

export default Ember.HTMLBars.makeBoundHelper(function(value) {
  return Ember.String.htmlSafe("<svg class='icon-x'><use xlink:href='#icon-" + value + "'></use></svg>");
});

在app > helpers > i-con.js

车把功能 |帮手还是？

handlebars function | helper or?

handlebars.js

i-con.js