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'}}或其他。

这是用＃34;助手来完成的吗？＆＃34;或者是什么？ {{#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

中的

车把功能|帮手还是？

2 个答案:

I-con.js