Какой из них я должен использовать? Backbone.js Router.navigate и window.location.hash

Недавно я начал изучать Backbonejs, прочитав книгу. и я чувствую себя немного запутанным в этом вопросе. Это маршрутизатор:

define(['views/index', 'views/login'], function(indexView, loginView) {

    var SelinkRouter = Backbone.Router.extend({

        currentView: null,

        routes: {
            'home': 'home',
            'login': 'login'
        },

        changeView: function(view) {
            if(null != this.currentView)
                this.currentView.undelegateEvents();
            this.currentView = view;
            this.currentView.render();
        },

        home: function() {
            this.changeView(indexView);
        },

        login: function() {
            this.changeView(loginView);
        }
    });

    return new SelinkRouter();
});

и это метод загрузки приложения:

define(['router'], function(router) {

    var initialize = function() {
        // Require home page from server
        $.ajax({
            url: '/home',          // page url
            type: 'GET',           // method is get
            dataType: 'json',      // use json format
            success: function() {  // success handler
                runApplicaton(true);
            },
            error: function() {    // error handler
                runApplicaton(false);
            }
        });
    };

    var runApplicaton = function(authenticated) {

        // Authenticated user move to home page
        if(authenticated) window.location.hash='home';
                          //router.navigate('home', true); -> not work

        // Unauthed user move to login page
        else window.location.hash='login';
             //router.navigate('login', true); -> not work

        // Start history
        Backbone.history.start();
    }

    return {
        initialize: initialize
    };
});

Мой вопрос о части runApplication. Пример книги, которую я прочитал, пропустил маршрутизатор в модуль так же, как это, но он использовал window.location.hash = "XXX", и маршрутизатор вообще не касался.

Я думал, что метод "navigate" заставит браузер перейти на указанную мной страницу, но ничего не произошло. Зачем?

И для наилучшей практики, каков наилучший способ добиться перемещения между страницами (или представлениями)?

спасибо за любые идеи.

Ответ 1

В соответствии с документацией, если вы также хотите вызвать функцию, принадлежащую определенному маршруту, вам необходимо передать опцию trigger: true:

Всякий раз, когда вы достигаете точки в своем приложении, которое вы хотите сохранить как URL-адрес, перейдите по ссылке, чтобы обновить URL-адрес. Если вы хотите также вызовите функцию маршрута, установите для параметра триггера значение true. к обновить URL-адрес без создания записи в истории браузера, установить замените значение на true.

ваш код должен выглядеть так:

if(authenticated)
    router.navigate('home', {trigger: true});

Как только ваш маршрутизатор создан, вам также нужно позвонить

Backbone.history.start();

Backbone.history.start([параметры])

Когда все ваши маршрутизаторы были созданы, и все маршруты настроены правильно, вызовите Backbone.history.start(), чтобы начать мониторинг событий hashchange и диспетчерских маршрутов.

Наконец, логика runApplication будет похожа на это:

var runApplicaton = function(authenticated) {

    var router = new SelinkRouter();
    // Start history
    Backbone.history.start();

    // Authenticated user move to home page
    if(authenticated)
        router.navigate('home', true);
    // Unauthed user move to login page
    else
        router.navigate('login', true);
}

Ответ 2

Вы также можете использовать статический метод, чтобы избежать зависимости от маршрутизатора (при использовании, например, requirejs).

Backbone.history.navigate(fragment, options)

Таким образом, вам просто нужно:

// Start history
Backbone.history.start();

// Authenticated user move to home page
if(authenticated)
  Backbone.history.navigate('home', true);
// Unauthed user move to login page
else
  Backbone.history.navigate('login', true);