Переключение представления приложения backbone.js?

Я пишу интерфейс для своего RESTful API, используя Backbone... и пока мне это очень нравится. Изучение этого фреймворка по-прежнему очень интересно. Однако сейчас я застрял на том, что кажется, по крайней мере мне, что это должно быть прямолинейно.

Теперь у меня есть одна (и единственная) html-страница, на которой находится основное приложение, в котором перечислены один или несколько продуктов. И, допустим, он находится здесь: http://localhost/index.html

Я хотел бы иметь возможность переключаться с представления списка продуктов на представление нового продукта (через событие нажатия на кнопку вверху). И что, насколько я понимаю, мне нужно начать использовать роутер для коммутации по шаблону, описанному в Как переключать представления с помощью Backbone.js.

  1. Является ли переключение вида тем, что мне нужно делать, чтобы добиться такого поведения?
  2. Это выглядит нелепо: 

    http://localhost/index.html#product/new

    И, поскольку я использую [tornado](http://tornadoweb.org) в качестве веб-сервера как для своего API, так и для статического контента, я могу не просто реализовать правило перезаписи легко. Я могу переключиться на использование nginx для статического контента в ближайшем будущем, но пока этого не сделал. Если я буду использовать маршрутизатор для переключения представлений, например, при переходе от Review к Create (операций CRUD), как мне изменить URL/URI, чтобы он выглядел что-то еще в этом духе

    http://localhost/product/new

url-rewriting view switching backbone.js
person bitcycle    schedule 03.09.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Чтобы получать изменения URL-адресов без хэша, ваш браузер должен поддерживать pushstate. Если я не ошибаюсь, Backbone откажется от использования хэшей, если ваш браузер не поддерживает pushstate. Вы должны инициализировать свой маршрутизатор следующим образом, чтобы использовать pushstate в своем приложении:

Backbone.history.start({pushState: true})

Мне нравится, как @alexanderb использует переключение видов. Просто УБЕДИТЕСЬ, что когда вы меняете представления, вы избавляетесь от них правильно. В противном случае вы столкнетесь с некоторыми сложными проблемами, которые трудно отладить. Подробнее читайте здесь.

person TYRONEMICHAEL    schedule 03.09.2012

arrow_upward
1
arrow_downward

Да, вам нужны 2 вещи - Router и ApplicationViewManager (какой-то класс, отвечающий за изменение вида).

define(function () {

var ViewManager = function () {
    return {
        show: _showView
    };
};

function _showView(view) {
    if (this.currentView) {
        this.currentView.close();
    }

    this.currentView = view;
    this.currentView.render();

    $("#app").html(this.currentView.el);
}

return ViewManager;

});

В маршрутизаторе вы делаете что-то вроде:

// router
var ApplicationRouter = Backbone.Router.extend({

    initialize: function () {
        this.viewManager = new ViewManager();
    },

    routes: {
        '': 'dashboard',
        'configure/sites/:id': 'configure'
    },

    dashboard: function () {
        var app = require('./apps/DashboardApp');
        app.run(this.viewManager);
    },

    configure: function (id) {
        var app = require('./apps/ConfigureApp');
        app.run(id, this.viewManager);
    }

});

Некоторые примеры кода вы можете взять из этого репозитория< /а>.

person Alexander Beletsky    schedule 03.09.2012