Iconic JS не отображается должным образом с Ember

Я работаю над приложением 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 все еще работает должным образом), поэтому я думаю, что это решает ее для сейчас.

Спасибо еще раз!


ember.js iconic
person Mylan Connolly    schedule 15.01.2015    source источник
comment
Просто небольшой комментарий с версией инициализации, я бы заменил «this.render()» на «this._super()»   -  person MrVinz    schedule 16.01.2015

Ответы (2)


arrow_upward
1
arrow_downward

Ну, это работает только для вашего приложения;)

Для чего-то более «общего», которое работает на любом маршруте, вы можете попробовать сделать что-то вроде этого сообщения: Глобальный хук в Ember при рендеринге шаблона

С помощью cli вы можете создать CustomRoute в app/routes/custom.js.

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

Если это для использования на всех ваших маршрутах, вы можете «Повторно открыть» реализацию Route по умолчанию в инициализаторе, как описано в этом сообщении: Ember CLI: где повторно открывать классы фреймворка

person MrVinz    schedule 15.01.2015
comment
Спасибо, мистер Винз, я подозревал, что это связано с моим недопониманием с Эмбер. Я создал файл app/routes/custom.js, о котором вы упомянули, но мне немного непонятно, как его открыть. Должен ли я вводить логику в повторное открытие? И нужно ли повторно открывать CustomRoute или Ember.Route? Извините за вопросы, я чувствую, что это что-то основное, что мне не хватает! Спасибо! - person Mylan Connolly; 15.01.2015
comment
Ничего себе, я понял! Обновление моего вопроса с некоторыми другими особенностями на случай, если у кого-то еще возникнет аналогичная проблема. Спасибо еще раз! - person Mylan Connolly; 15.01.2015

arrow_upward
1
arrow_downward

Я знаю, что на этот вопрос уже были даны ответы, но я бы порекомендовал другой подход — создать компонент пользовательского значка, который вызывает IconicJS().inject после рендеринга компонента.

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

Я не очень хорошо знаком с Iconic, поэтому я не знаю, есть ли способ быть более конкретным и вставлять значок только в текущий компонент, но если он поддерживает указание любого селектора для метода inject, вы, безусловно, могли бы это сделать .

person awgreenarrow08    schedule 24.02.2016
comment
Эй, извините, я только что увидел ваш комментарий ... Мне нравится эта идея, и, вероятно, это более идейный способ сделать это в наши дни. Я хочу сказать, когда я спросил об этом, компоненты еще не были так широко использованы. Хороший звонок! - person Mylan Connolly; 03.03.2016