Как проверить, было ли представление боковой панели уже отображено в магистрали?

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

Когда пользователь нажимает кнопку «Обновить» на подстранице, боковая панель не отображается.

Как проверить, существует ли представление и было ли оно отображено?


javascript backbone.js backbone-views
person user2946632    schedule 12.11.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Разделите обязанности и придерживайтесь этого. Не ставьте рендеринг боковой панели в руки просмотра домашней страницы.

У вас может быть представление layout, которое обрабатывает отображение контента, верхнего колонтитула, нижнего колонтитула и боковой панели. Затем, когда пользователь переходит на другую страницу, маршрутизатор просто вызывает что-то вроде setContent(view) в представлении макета, что гарантирует, что боковая панель (и все остальное) была отрисована до отображения содержимого.

Предполагая этот шаблон:

<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="sidebar"></div>
</body>

Представление макета может быть таким простым, как:

var Layout = Backbone.View.extend({
    el: 'body' // just for the simple example, let's put this as the body.

    // This avoids repeating selector strings everywhere in the view code.
    // If you change a class name in the template, change it only once here.
    regions: {
        header: '.header',
        content: '.content',
        sidebar: '.sidebar'
    },
    initialize: function(options) {
        var regions = this.regions;

        // I like to "namespace" my sub-views into an object.
        // That way, you still can access them by name, but you can also
        // loop on the sub-views.
        this.views = {
            sidebar: new SideBar({ el: regions.sidebar }),
            header: new Header({ el: regions.header }),
        };

        this.$content = this.$(regions.content);
    },

    render: function() {
        _.invoke(this.views, 'render');
        return this;
    },

    /**
     * Set the content to a view.
     * @param {Backbone.View} view to replace the content with.
     */
    setContent: function(view) {
        var views = this.views,
            content = views.content;
        if (content !== view) {
            if (content) content.remove();
            views.content = content = view;
            this.$content.html(content.render().el);
        }
    },
});

И роутер мог лениво создавать представления:

var AppRouter = Backbone.Router.extend({
    routes: {
        '*otherwise': 'homepage',
        'specific/:id': 'specificPage'
    },
    initialize: function() {
        this.layout = new Layout();
        this.layout.render();
        this.views = {};
    },
    homepage: function() {
        // These local variables improve minification and readability.
        var views = this.views,
            homepage = views.homepage;
        if (!homepage) {
            views.homepage = homepage = new HomePage();
        }
        this.layout.setContent(homepage);
    },
    specificPage: function(id){
        var views = this.views,
            specific = views.specific;
        if (!specific){
            views.specific = specific = new HomePage();
        }
        specific.setId(id); // hypothetical logic
        this.layout.setContent(specific);
    }
});
person Emile Bergeron    schedule 12.11.2016