修改

Question

我正在研究一个EmberJS应用程序（我的第一个应用程序），我正在遇到一些绊脚石。

我在大多数应用程序逻辑方面取得了相当不错的进展，但是有一点让我烦恼的是IconicJS无法正常工作。从本质上讲，IconicJS＆＃34;注入＆＃34;将SVG数据转换为<img>元素，因此每次有适当类的新<img>元素时都需要运行它们。人们会这样做：

IconicJS().inject("img.iconic");

所以我把它放在app/views/application.js并与基金会的初始化一起给了它一个镜头：

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

虽然我仍然不是百分之百，这是从性能角度解决此问题的最佳方法，但它似乎现在正常工作（所有适用的<img>标记都会被注入，而Foundation仍在正常工作）所以我认为现在解决了这个问题。

再次感谢！

Answer 1

那只适用于你的应用程序视图;）

更多内容＆＃34; generic＆＃34;哪个可以在任何路线上工作，你可以尝试做这样的事情： 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);
  }
});

如果要在所有路线上使用，您可以＆＃34;重新打开＆＃34;初始化程序中的默认框架Route实现，如本文中所述：Ember CLI: where to reopen framework classes

Answer 2

我知道这些问题已经得到解答，但我建议的另一种方法是创建一个自定义图标组件，在组件渲染后调用IconicJS().inject。

export default Ember.Component.extend({
  didRender() {
    Ember.run.scheduleOnce(() => {
      IconisJS.inject('img.iconic');
    };
  }
});

我对Iconic并不是很熟悉，所以我不知道是否有更具体的方法，只将图标注入当前组件，但如果它支持为inject指定任何选择器方法，你当然可以这样做。

标志性的JS无法与Ember正确渲染

修改

2 个答案: