车把功能| 帮手还是？

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'}} 。

这可以通过“助手”来完成吗？ 要不然是啥？ {{#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