2016-06-14 5 views
-1

Я пытаюсь реализовать действие willTransition в сочетании с пользовательским модальным. Мой код ниже:Ember: willTransition «Невозможно прочитать свойство» transitionTo 'undefined "

Модальные

<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel">Confirm</h4> 
       </div> 
       <div class="modal-body"> 
        Please save your changes before you leave page. 
       </div> 

       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" id="stay" data-dismiss="modal">Stay</button> 
        <button type="submit" class="btn btn-primary" id="leave" data-dismiss="modal">Leave</button> 
       </div> 
      </div> 
     </div> 
    </div> 

Маршрут

actions: {  
    willTransition(transition) { 
     var self = this; 
     if (self.controller.get('changesNotSaved')) { 

      transition.abort(); 

      Ember.$('#confirmModal').modal(); 
      Ember.$('#leave').on('click', function(){ 
       Ember.self.transitionTo(transition.handlerInfos[1].name); 
      }); 
     } 
     else { 
      return true; 
     }    
    }, 
} 

Моя проблема заключается в том, что я не могу перенаправить пользователя, когда он нажимает кнопку «выйти» из модального. Я получаю ошибку

Не удается прочитать свойство «transitionTo» неопределенной

Я прочитал на странице documantation, что вызов transitionTo внутри willTransition выполнима http://emberjs.com/api/classes/Ember.Route.html#event_willTransition.

Я действительно не знаю, как это решить ... Спасибо заранее!

ответ

2

Я не знаю, где вы видели использование Ember.self, но это первый раз, когда я вижу его , и, очевидно, ошибка возникает, потому что Ember.self - undefined.

Поскольку вы сохраняете контекст функции (вот она, значение переменной this) в начале, если вы только что изменили Ember.self на self, она должна работать.

Другие, более современный подход, использует функцию стрелки, поскольку стрелка функция сохраняет контекст вызывающего абонента:

Ember.$('#leave').on('click',() => { 
    this.transitionTo(transition.handlerInfos[1].name); 
}); 

С помощью этого метода можно удалить var self = this; линии в самом начале.

Подробнее о функциях стрелок и их сохранении в контексте можно узнать больше here.

Я рекомендую вам прочитать лекции о том, как работает Javascript, потому что этот шаблон - это то, с чем вы будете постоянно работать в Javascript.

+0

Большое спасибо за ваш ответ. Использование функции стрелки разрешило появление ошибки, но функциональность по-прежнему не правильная. Когда я нажимаю кнопку «Оставить», я остаюсь на той же странице. Кажется, что переход не работает. Есть идеи? – Jack

-1

Не должно быть this вместо Ember.self?

Ember.$('#leave').on('click', function(){ 
    this.transitionTo(transition.handlerInfos[1].name); 
}); 

Я никогда не видел Ember.self, и я думаю, что это причина, почему он не определен ...

+0

Вы находитесь в обратном вызове щелчка, это относится к элементу dom, который был нажат, узел не имеет «transitionTo». –