2013-03-13 5 views
6

Wiem, że istnieje wiele tutoriali/informacji o organizowaniu aplikacji za pomocą Backbone.js. Tworzę stopniowo jeden za pomocą tych tutoriali. Nie rozumiem koncepcji routerów. Cóż, zdaję sobie sprawę, że routery są punktem początkowym (i informują o stanie aplikacji) i lepiej jest unikać umieszczania tam większej logiki.Trasa połączenia wewnątrz widoku w Kościele

Mam jeden router. Moja aplikacja najpierw ładuje nagłówek, stopkę i główną część strony. W głównej części, po pierwsze, powinienem zalogować się do użytkownika. Aby załadować stronę logowania, zrobiłbym coś takiego:

 var AppRouter = Backbone.Router.extend({ 
      initialize : function() { 
      var headerView = new HeaderView({el:$('#header')}); 
      headerView.render; 

      var footerView = new FooterView({el:$('#footer')}); 
      footerView.render; 

      var loginView = new LoginView({el:$('#login')}); 
      loginView.render; 
     }, 
     routes : { 
      "inbox" : "inbox", 
      "sentbox : "sentbox" 
     }, 
     inbox : function() { 
      // ... 
     }, 
     sentbox : function() { 
      // ... 
     } 
    }); 
    app = new AppRouter(); 
    Backbone.history.start(); 

Po pomyślnym zalogowaniu, strona mailowa zostanie załadowana. MailView ma kilka zdarzeń, które pokazują skrzynkę odbiorczą, na przykład sentbox.

 events: { 
     "click .inbox": "showInbox", 
     "click .sentbox": "showSentbox", 
     }, 
     showInbox : function() { 
      // app.route() or app.inbox() - ? 
     } 

W tym momencie chcę router pokazać ../#inbox i ../#sentbox odpowiednio. Zastanawiam się, czy powinienem zadzwonić tutaj jedną z metod routera, aby pokazać to w pasku adresu. Dlaczego się mylę, ponieważ mówi się, że korzystanie z jednego routera jest lepsze niż więcej. Jeśli to zrobię, moja kompilacja będzie bardziej skomplikowana. Innym problemem jest to, że użytkownicy bezpośrednio wpisują adres, powinienem załadować tę stronę. Myślę, że wymaga to umieszczenia logiki wewnątrz aplikacji AppRouter.

Podaj właściwe podejście tutaj. Dzięki z góry!

Odpowiedz

12

Wymeldowanie Router.navigate() (http://documentcloud.github.com/backbone/#Router-navigate)

normalnie zapisać instancji zmiennej mój Router wewnątrz obiektu aplikacji, np

var App = { 
    Views: {}, 
    Routers: {}, 
    Models: {}, 
    data: {} 

    initialize: function() { 
    this.data.mainRouter = new App.Routers.MainRouter(); 
    } 
}; 

gdzie App.MainRouter jest zdefiniowany jako:

App.Routers.MainRouter = Backbone.Router.extend({ 

    routes: { 
    'route1' : 'route1handler', 
    'route2/:param' : 'route2handler' 
    }, 

    ... 
}); 

Następnie w ciągu moim zdaniem, jeśli chcę, aby przejść do nowej trasy, wzywam:

App.data.mainRouter.navigate('route2/param1'); 
+7

Pamiętaj, że możesz wywołać 'Backbone.history.navigate', jeśli twój router nie jest dostępny z twojego widoku. – jgillich

+0

Dobra uwaga - jest to prawdopodobnie lepsza opcja. –

+3

To zmienia tylko skrót adresu URL i nie uruchamia metody obsługi trasy. – skaterdav85

7

Wystarczy wysłać przeglądarkę na odpowiednią drogą poprzez:

location.href = "#/the_route_you_want"; 

Słuchacz ciągu Backbone.history będzie przechwytywać zdarzenia hashChange i prawidłowego zostanie wyświetlona.

Można to zrobić w bardzo prosty sposób, za pomocą HTML:

<a href="#/the_route_you_want">The Route You Want</a> 

For further reading.

+0
1

Jeśli chcesz aby wywołać funkcję trasy, ustaw opcję wyzwalacza na wartość true:

app.navigate("help/troubleshooting", {trigger: true});