Временно добавьте CSS-класс в элемент DOM с помощью Ember.js

Question

Временно добавьте CSS-класс в элемент DOM с помощью Ember.js

0

Фоновая информация:

Я использую Ember.js.

Вот мой код:

App.AddView = Ember.View.extend({
  classNameBindings: ['enter:enter:leave', 'dropped:dropped:leave'],
  enter: false,
   drop: function(event) {
     event.preventDefault();
     event.stopPropagation();
     this.set('dropped', 'true');
     this.set('text', 'Thanks');
   }
 });

И мой код Handlebars:

<script type="text/x-handlebars" id="add">
  {{#view App.AddView id="drop"}}
      {{msg}}
  {{/view}}
</script>

Когда я бросаю на него предмет, он говорит "Спасибо" и становится синим. Замечательно.

Задача:

То, что я хотел бы сделать, заключается в том, чтобы сохранить "Спасибо" и синий цвет в течение нескольких секунд, а затем вернуться к обычному цвету и сообщению, отображаемым на pageload. Я не мог найти примеров для этого в Ember.js, и все мои попытки просто использовать обычные jQuery способы делать что-то не работают.

Вопрос:

Как я могу делать действия (применяя класс к элементу, изменяя текст элемента и т.д.) Тайм-аут в Ember.js?

beth 08 март 2014, в 02:43

Источник

0

Хук didInsertElement может быть решением. вот полезная статья Вы можете выполнить функцию jQuery в afterRenderEvent.
TrevTheDev 08 март 2014, в 01:39
0

Другим решением является Ember.run.debounce, который можно использовать для выполнения кода через определенный промежуток времени.
TrevTheDev 08 март 2014, в 01:41

Теги:

javascript

jquery

animation

ember.js

timeout

1 ответ

Ещё вопросы

Хук didInsertElement может быть решением. вот полезная статья Вы можете выполнить функцию jQuery в afterRenderEvent.
Другим решением является Ember.run.debounce, который можно использовать для выполнения кода через определенный промежуток времени.

Aaron Storck · Accepted Answer · 2014-03-07T22-49-00.000Z

Связывание классов произойдет в тот момент, когда привязка соответствует условию. Чтобы добиться эффекта задержки/анимирования, вам придется либо использовать анимацию CSS3 (может работать анимация ключевого кадра), либо использовать JQuery. Нет ничего плохого в использовании JQuery для анимации и других сложных манипуляций с DOM.

Изнутри представления вы можете получить доступ к объекту JQuery с областью с помощью this.$() метода this.$(). Вы можете сделать что-то вроде следующего:

App.AddView = Ember.View.extend({  
   classNames: ['defaultState'],
   drop: function(event) {
     event.preventDefault();
     event.stopPropagation();

     this.$().animate({ backgroundColor: "#7cc9ea"}, 400);
     this.set('text', 'Thanks');

     Ember.run.later(this, function(){
       this.$().animate({ backgroundColor: "#FFFFFF"}, 400);
       this.set('text', '');
     }, 500);
   }
 });

Чтобы оживить цвет фона, вам понадобится плагин jquery-color. Надеюсь это поможет! :)

Изменение: если вы хотите анимировать фон или иным образом манипулировать DOM вложенного элемента, вы можете получить к нему доступ, используя селектор, как обычно. просто помните, что он начинается с элемента вида в качестве корневого узла. например, this.$('#myNestedButton')