Почему didTransition не вызывает мой jquery?

Question

Этот вопрос пришел ко мне после столкновения с проблемой didTransition в этом вопросе. «Calling a jquery event after the page transitions»

Так как вы можете видеть, есть console.log & JQuery

Обратите внимание, что каждый HTML (или HBS, так как это ember.js) файл имеет класс с именем float-right-col & очень важно, чтобы после каждого переход в моем приложении, что класс 'float-right-col' найден и получает класс float-right-col-minimized.

App.ApplicationRoute = Ember.Route.extend({ 
     actions: { 
     didTransition: function() { 
      console.log('log2'); 
      $('.float-right-col').addClass('float-right-col-minimized').delay(200); 
     }, 
     }, 
}); 

& & то, конечно, в каждом файле HTML/HBS есть DIV с классом float-right-col

<div class="float-right-col"></div> 

Странная часть является то, что консоль отображает сообщение «log2», но ' float-right-col 'остается нетронутым.

Моя первая мысль была, что, возможно, didTransition

Answer 1

Вы могли бы определенно подойти к этому в гораздо более Ember образом. Если вы используете JQuery для обработки такой логики (IMO, который использует пренебрежение некоторыми инструментами, которые предоставляет Ember), вы, вероятно, захотите принять во внимание цикл запуска Ember. События в ember по существу сидят в очереди приоритетов, пока они не будут выполнены. Конкретная очередь интерес afterRender:

afterRender содержит задания предназначены для запуска после того, как все ранее планируется вынести задачи выполнены. Это часто полезно для третьих сторон библиотек манипулирования DOM, который должен быть запущен только после того, как весь дерево DOM был обновлен

Так что-то вдоль линий:

Ember.run.scheduleOnce('afterRender', self, function(){ 
    $('.float-right-col').addClass('float-right-col-minimized'); 
}); 

Я иногда должен писать такой код, когда я переношу библиотеки JQuery в компоненты.

Но реальная сила Эмбера заключается в том, как он может вывести вашу логику из DOM и поставить правду в Javascript. Я не знаю, что вы пытаетесь сделать точно, но позвольте мне бросить предложение или два там. Контроллер Ember предназначен для инкапсуляции состояния ваших шаблонов. Если у вас есть CSS, который зависит от что-то минимизируется или нет, вы должны иметь шаблон:

<div {{bind-attr "class=isMinimized:float-right-col-minimized"}}> 
stuff 
</div> 

Тогда на контроллере, то есть вычисляемое свойство или просто обычное свойство:

isMinimized: true 
someFunction: function(){ 
    if(cond) 
     this.set('isMinimized', true); 
    else 
     this.set('isMinimized', false); 
}.observes('someChangingPropertyElseWhere') 

или

isMinimized: function(){ 
    if(cond) 
     return true; 
    else 
     return false; 
}.property('someChangingPropertyElseWhere') 

Это добавляет класс CSS float-right-col-minimized всякий раз, когда isMinimized принимает значение ИСТИНА (использование :: для добавления, когда ложь).

Вы также можете указать {{bind-attr "class=dynamic :static"}}, где dynamic - это переменная (просто показывая вам: перед именем класса, если это просто обычный класс, а не имя переменной контроллера).Разница здесь в том, что динамический, вместо того, чтобы возвращать true или false, как в предыдущем примере, возвращает строку, которая является классом css. например:

dynamic: function(){ 
    if(cond) 
     return 'float-right col float-right-col-minimized' 
    else 
     return 'float-right col' 
}.property() 

Во всех этих случаях, ваша логика других изменяет переменные Javascript как isMinimzed, которые, в свою очередь, обновляет DOM. Я предпочитаю думать в терминах переменных, таких как isMinimized, и устанавливать это, когда что-то нужно свести к минимуму, вместо того, чтобы писать селектор JQuery, беспокоясь о том, когда DOM доступен и т. Д. Чувствует себя намного чище. Ember обрабатывает соответствующее время, чтобы изменить изменения, если вы позволите. Кроме того, если вам нужно что-то другое, чтобы зависеть от минимизации, он может наблюдать свойство isMinimized. Его довольно легко настроить отношения, которые могут вызвать цепную реакцию обновлений DOM.

И если вам нужно это свойство доступно на каждой странице, потому что на каждом этапе после перехода вы имеете класс минимизации, рассмотрите возможность использования Ember.Mixin и продолжите с ним все свои контроллеры. Этот mixin может инкапсулировать переключение этого класса, а также добавить свойство isMinimized каждому контроллеру, который расширяет mixin.

ли вам, что вы хотите, я обнаружил, что если я должен писать JQuery, когда я не взаимодействие с кем-то ELSES DOM в моем Посте приложениях, я потерпел неудачу в использовании власти Ember, чтобы в полную