2

我正在开发一个 EmberJS 应用程序（我的第一个应用程序），但遇到了一些绊脚石。

我在大多数应用程序逻辑方面都取得了不错的进展，但是真正困扰我的一件事是 IconicJS 无法正常工作。本质上，IconicJS 将 SVG 数据“注入”到一个元素中，因此每次有具有适当类<img>的新元素时都需要运行。<img>一个人会这样做：

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 仍然正常工作）所以我认为这现在可以解决它.

再次感谢！

4

2 回答 2

1

好吧，这仅适用于您的应用程序视图；）

对于适用于任何路线的更“通用”的东西，您可以尝试在这篇文章中执行类似的操作： 渲染模板时在 Ember 中的全局挂钩

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

如果它用于所有路由，则可以在初始化程序中“重新打开”默认框架路由实现，如本文所述：Ember CLI：重新打开框架类的位置

于 2015-01-15T07:41:12.373 回答
1

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

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

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

于 2016-02-24T14:41:59.497 回答