EmberJS: средство выбора даты Jquery остается активным при смене маршрутов

У меня есть веб-приложение emberjs, где одним из моих представлений является страница поиска для запроса базы данных записей. У меня есть возможность фильтровать по дате, и я использую средство выбора даты JQuery.

Проблема, с которой я сталкиваюсь, заключается в том, что если пользователь открывает средство выбора даты, а затем нажимает кнопку браузера «назад» или «вперед», она остается активной на экране до тех пор, пока пользователь не щелкнет. Чтобы уточнить процесс, как показано ниже:

  1. Перейти на страницу поиска
  2. Нажмите выберите дату
  3. Появляется средство выбора даты
  4. Пользователь нажимает кнопку «Назад» в браузере
  5. Предыдущая страница загружается, НО с датпикером все еще задерживается

Есть ли у кого-нибудь предложения о том, как скрыть или уничтожить средство выбора даты при нажатии кнопки «Назад» в браузере?

Спасибо!!

РЕДАКТИРОВАТЬ --------------------------- Текущий код:

Formal.Route.Search = Ember.Route.extend({

    deactivate: function () {
        console.log("hi");
        $("ui-datepicker-div").datepicker("destroy");

    },

javascript datepicker jquery jquery-ui ember.js
person Anthony Ryan    schedule 28.10.2014    source источник
comment
РЕДАКТИРОВАТЬ: я использую деактивацию, чтобы обнаружить изменение маршрута, но как мне убрать средство выбора даты из поля зрения? Спасибо!   -  person Anthony Ryan    schedule 29.10.2014
comment
Я просто собирался сказать это, вы можете позвонить; $(".selector" ).datepicker( "destroy" ); или аналогичный   -  person Asgaroth    schedule 29.10.2014
comment
Когда я нажимаю кнопку «Назад», кажется, что средство выбора даты все еще не уничтожается. Извините за нубский вопрос, но .selector должен быть правильным идентификатором элемента?   -  person Anthony Ryan    schedule 29.10.2014

Ответы (2)


arrow_upward
0
arrow_downward

Поместите логику удаления в View вместо Route. Предположим, имя вашего шаблона — «поиск», тогда

App.SearchView=Ember.View.extend({
    didInsertElement:function(){
       $("#ui-datepicker-div").datepicker();
    },
    willDestroyElement:function()){
       $("#ui-datepicker-div").datepicker("destroy");
    }
});

Примечание. Я предположил, что ваш селектор - это идентификатор, если это класс css, используйте $(".ui-datepicker-div")

Если вы хотите написать средство выбора даты как компонент, который можно использовать во всем приложении, посмотрите скринкаст здесь http://eviltrout.com/2014/06/03/jquery-component.html

P.S. Если вы все еще не смогли разобраться, покажите свой код на http://jsbin.com/.

person Susai    schedule 29.10.2014
comment
Отличный призыв перейти к представлению. Помогли мне отследить первопричину и узнать. - person Anthony Ryan; 29.10.2014

arrow_upward
0
arrow_downward

Всем большое спасибо за помощь!

Я решил проблему следующим образом:

Formal.View.Datepicker = Ember.TextField.extend({
   destroyDatepicker: function () {
        this.$().datepicker("hide");
    },
});

По какой-то причине «уничтожить» не помогло, а «скрыть» помогло. Если у кого-то есть понимание, почему это так, я хотел бы услышать.

person Anthony Ryan    schedule 29.10.2014