Ember 无法正确呈现标志性 JS
Iconic JS not rendering properly with Ember
我正在开发一个 EmberJS 应用程序(我的第一个),但遇到了一些障碍。
我在大多数应用程序逻辑方面取得了很好的进展,但是真正让我烦恼的一件事是 IconicJS 无法正常工作。本质上,IconicJS "injects" 将 SVG 数据放入 <img>
元素中,因此每次有新的 <img>
元素和适当的 class 时都需要 运行 .人们会这样做:
IconicJS().inject("img.iconic");
所以我试了一下,把它放在 app/views/application.js
和 Foundation 的初始化一起:
import Ember from 'ember';
export default Ember.View.extend({
didInsertElement: function() {
this.$().foundation();
IconicJS().inject('img.iconic');
}
});
然而,这似乎只在初始页面加载时触发。因此,初始页面加载后的任何导航都会导致 svg <img>
标记无法正确呈现。
我不确定这是否与我加载数据的方式有关,因为我是 Ember 的新手。
如果有人有任何想法,我真的很想听听。如果我没有提供足够的信息,我提前道歉。如果需要,我很乐意添加更多内容。
编辑
多亏了 MrVinz,我才得以完成这件事。我需要的是一个初始化程序。由于我使用的是 Ember-CLI 应用程序,因此它位于 app/initializers/initialize-assets.js
中。该文件的内容是(在我的例子中):
import Ember from 'ember';
export default {
name: 'initialize-assets',
initialize: function() {
Ember.Route.reopen({
renderTemplate: function() {
this.render();
var initResources = function() {
Ember.$().foundation();
IconicJS().inject('img.iconic');
};
Ember.run.scheduleOnce('afterRender', initResources);
}
});
}
};
虽然我仍然不是 100% 从性能的角度来看这是解决这个问题的最佳方法,但它现在似乎可以工作(所有适用的 <img>
标签都被注入并且 Foundation 仍在工作正确)所以我认为这暂时解决了它。
再次感谢!
好吧,这仅适用于您的应用程序视图 ;)
对于更多 "generic" 可以在任何路线上工作的东西,您可以尝试做类似 post 的事情:
Global hook in Ember when template is rendered
使用 cli,您可以在 app/routes/custom.js
中创建 CustomRoute
export default Ember.Route.Extend({
renderTemplate : function(){
this.render();var myfunction=function(){
//do your jquerystuff here
Ember.$().foundation();
IconicJS().inject('img.iconic');
}
Ember.run.scheduleOnce('afterRender', myfunction);
}
});
如果要在所有路由上使用,您可以 "Reopen" 初始化程序中的默认框架路由实现,如 post 中所述:Ember CLI: where to reopen framework classes
我知道这个问题已经得到解答,但我推荐的另一种方法是创建一个自定义图标组件,在组件呈现后调用 IconicJS().inject
。
export default Ember.Component.extend({
didRender() {
Ember.run.scheduleOnce(() => {
IconisJS.inject('img.iconic');
};
}
});
我对 Iconic 不是很熟悉,所以我不知道是否有更具体的方法,只将图标注入当前组件,但它是否支持为 inject
方法,你当然可以做到。
我正在开发一个 EmberJS 应用程序(我的第一个),但遇到了一些障碍。
我在大多数应用程序逻辑方面取得了很好的进展,但是真正让我烦恼的一件事是 IconicJS 无法正常工作。本质上,IconicJS "injects" 将 SVG 数据放入 <img>
元素中,因此每次有新的 <img>
元素和适当的 class 时都需要 运行 .人们会这样做:
IconicJS().inject("img.iconic");
所以我试了一下,把它放在 app/views/application.js
和 Foundation 的初始化一起:
import Ember from 'ember';
export default Ember.View.extend({
didInsertElement: function() {
this.$().foundation();
IconicJS().inject('img.iconic');
}
});
然而,这似乎只在初始页面加载时触发。因此,初始页面加载后的任何导航都会导致 svg <img>
标记无法正确呈现。
我不确定这是否与我加载数据的方式有关,因为我是 Ember 的新手。
如果有人有任何想法,我真的很想听听。如果我没有提供足够的信息,我提前道歉。如果需要,我很乐意添加更多内容。
编辑
多亏了 MrVinz,我才得以完成这件事。我需要的是一个初始化程序。由于我使用的是 Ember-CLI 应用程序,因此它位于 app/initializers/initialize-assets.js
中。该文件的内容是(在我的例子中):
import Ember from 'ember';
export default {
name: 'initialize-assets',
initialize: function() {
Ember.Route.reopen({
renderTemplate: function() {
this.render();
var initResources = function() {
Ember.$().foundation();
IconicJS().inject('img.iconic');
};
Ember.run.scheduleOnce('afterRender', initResources);
}
});
}
};
虽然我仍然不是 100% 从性能的角度来看这是解决这个问题的最佳方法,但它现在似乎可以工作(所有适用的 <img>
标签都被注入并且 Foundation 仍在工作正确)所以我认为这暂时解决了它。
再次感谢!
好吧,这仅适用于您的应用程序视图 ;)
对于更多 "generic" 可以在任何路线上工作的东西,您可以尝试做类似 post 的事情: Global hook in Ember when template is rendered
使用 cli,您可以在 app/routes/custom.js
中创建 CustomRouteexport default Ember.Route.Extend({
renderTemplate : function(){
this.render();var myfunction=function(){
//do your jquerystuff here
Ember.$().foundation();
IconicJS().inject('img.iconic');
}
Ember.run.scheduleOnce('afterRender', myfunction);
}
});
如果要在所有路由上使用,您可以 "Reopen" 初始化程序中的默认框架路由实现,如 post 中所述:Ember CLI: where to reopen framework classes
我知道这个问题已经得到解答,但我推荐的另一种方法是创建一个自定义图标组件,在组件呈现后调用 IconicJS().inject
。
export default Ember.Component.extend({
didRender() {
Ember.run.scheduleOnce(() => {
IconisJS.inject('img.iconic');
};
}
});
我对 Iconic 不是很熟悉,所以我不知道是否有更具体的方法,只将图标注入当前组件,但它是否支持为 inject
方法,你当然可以做到。