提问者:小点点

车把功能|助手或?


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


在Ember中,-so/htmlbar/. handlebar---我希望我可以创建一个这样的小函数……

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

然后{{icon'twitter'}}什么的。

这是用“助手”来完成的吗?还是什么?{{#icon}}{{twitter}}{{/icon}}几乎和写整件事一样糟糕…如果这就是它的结局…

给我指出正确的方向,这样我就可以做一个小把手——让代码更干净。

谢谢。


共2个答案

匿名用户

内联助手听起来非常适合您,您所描述的冗长语法将用于块助手,这是非常不必要的。

Ember-CLI(把它放在应用程序/助手/图标助手)

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'}}一样使用它

如果你没有使用EmberCLI,那么你可能应该看看它,但是在那之前你可以像这样注册它。

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/

匿名用户

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

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>");
});

应用程序