Магистральный маршрутизатор и глубокая связь

Question

Мое одностраничное веб-приложение состоит из 4-5 видов, расположенных вертикально, когда пользователь выбирает пункт меню, страница будет прокручиваться до соответствующего вида. Когда вы впервые заходите в приложение, это не проблема, однако если вы глубоко привязываетесь к элементу меню, моя страница подбрасывает его, потому что он пытается получить доступ к свойствам элемента, который еще не существует.

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

Если вы загружаете/и затем выбираете дом без проблем, но если вы прямо удаляете #home через браузер, то когда я получаю jQuery неопределенные ошибки.

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

Внутри маршрутизатора я инстанцировании и рендеринга всех моих взглядов в функции инициализации. Идея заключается в том, что инициализация всегда будет происходить до любого из моих маршрутов, явно не так.

Снова я прочитал несколько тем, которые показывают, как иметь функции до и после для всех маршрутов отдельных маршрутов, но даже с использованием этого подхода scrollToById терпит неудачу, потому что он не знает, что такое $ (id) на время вызова.

define(function (require, exports, module) { 

     var Backbone = require('backbone'); 

     return Backbone.Router.extend({ 
      initialize: function(){ 
       require(['ui/menu/menu','ui/home/home', 'ui/samples/samples', 'ui/resume/resume', 'ui/contact/contact'], 

       function(Menu, Home, Samples, Resume, Contact){ 

        var menu = new Menu(); 
         menu.render(); 

        var home = new Home(); 
         home.render(); 

        var samples = new Samples(); 
         samples.render(); 

        var resume = new Resume(); 
         resume.render(); 

        var contact = new Contact(); 
         contact.render(); 

       }); 
      }, 
      routes: { 
       ''   : 'init', 
       'home'  : 'home', 
       'samples' : 'samples', 
       'resume' : 'resume', 
       'contact' : 'contact' 
      }, 
      init: function(){ 

      }, 
      home: function(){ 
       this.scrollToById($(".home-container")); 
      }, 
      samples: function(){ 
       this.scrollToById($(".samples-container")); 
      }, 
      resume: function(){ 
       this.scrollToById($(".resume-container")); 
      }, 
      contact: function(){ 
       this.scrollToById($(".contact-container")); 
      }, 
      scrollToById: function(id) { 
       var val = $(id).offset().top - 127; 

       $('html, body').animate({ 
         scrollTop: val 
       }, 2000); 
      } 
     }); 

    }); 

Оцените любые советы и рекомендации.

Answer 1

Я думаю, что обработчики событий routes в маршрутизаторе получают инициализацию одновременно с функцией initialize. Из-за этого события маршрута запускаются, прежде чем элементы DOM будут визуализированы.

Я бы попытался сделать новую функцию вне маршрутизатора, которая содержит все, что находится внутри функции инициализации. Тогда последним в этой функции может быть создание экземпляра маршрутизатора. Это гарантирует, что вызовы маршрутов не будут вызываться до тех пор, пока не будут загружены ваши сценарии и DOM.