我最终为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}}
几乎和写整件事一样糟糕…如果这就是它的结局…
给我指出正确的方向,这样我就可以做一个小把手——让代码更干净。
谢谢。
内联助手听起来非常适合您,您所描述的冗长语法将用于块助手,这是非常不必要的。
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>");
});
在应用程序