Настройка заголовка страницы с помощью ember.js

Ответ 1

Я использовал этот подход:

Ember.Route.reopen({
    enter: function(router) { 
        this._super(router)

        # Set page title
        name = this.parentState.get('name')
        if (!Em.none(name)) {
            capitalizedName = name.charAt(0).toUpperCase() + name.slice(1)
            $(document).attr('title', "Website - " + capitalizedName)
        }
   }
})

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

Ответ 2

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

В качестве примера рассмотрим маршруты, определенные в этой скрипте: http://jsfiddle.net/schawaska/dWcUp/

Идея такая же, как и в предыдущем ответе, совсем по-другому, так как API-интерфейс маршрутизации значительно изменился.

В приведенном ниже маршруте используется крюк activate для установки заголовка документа через jQuery:

App.ProductRoute = Em.Route.extend({
    activate: function() {
        $(document).attr('title', 'Auto Web Shop - Product');
    }
});

Изменить. Как отмечено в разделе комментариев:

FYI activate - это метод API, а не введите - pauldechov

Этот ответ был дан в предыдущей версии Ember, и он больше не применяется.

Внутри connectOutlets вы можете сделать что-то так же просто, как использовать jQuery для изменения атрибута title:

[...]
home: Em.Route.extend({
    route: '/',
    connectOutlets: function (router, context) {                
        // router.set('navbarController.selected', 'home');                     
        router.get('applicationController')
              .connectOutlet('home');                     

        $(document).attr('title', 'YOUR TITLE GOES HERE');
    }
}),                
[...]

Но вы должны сделать это для каждого маршрута.

Если у вас есть что-то вроде навигационного контроллера, который устанавливает выбранный пункт меню навигации, вы смотрите свойство selected, чтобы привязать "активный" или "выбранный" класс css к элементу nav и установить заголовок страницы; или у вас может быть свойство только для названия в модели navitem, которое вы пройдете через контекст (но я считаю, что вам придется обрабатывать это в представлении и перейти к маршруту оттуда).

В любом случае, это просто показать один из возможных способов установки названия страницы.

EDIT. Я изменил существующую скрипту, чтобы сделать это. Взгляните на метод navigateTo в маршрутизаторе: http://jsfiddle.net/schawaska/hEx84/ (чтобы увидеть, как он работает, перейдите сюда http://jsfiddle.net/schawaska/hEx84/show/)

Ответ 3

Поскольку я много пытался найти хороший шаблон для настройки названия страницы, с последним Ember.js(1.0.0 RC7), я решил создать подкласс Ember.Route:

AppRoute = Ember.Route.extend({
    renderTemplate: function(controller, model) {
        this.render();

        var pageTitle = this.title ? this.title(controller, model) : null;
        document.title = pageTitle ? pageTitle : "Default Title";
    }
});

// all routes extend this new 'AppRoute'

App.PageRoute = AppRoute.extend({
    model: function(params) {
        // return your model
        return App.Page.find(params.page_id);
    },
    title: function(controller, model) {
        // return whatever should be your page title
        return controller.get('title');
    },
});

Вероятно, это будет поддерживаться с помощью Ember.js, если этот запрос на растяжение будет объединен: Маршрутизатор теперь отслеживает свойство title для обработчиков маршрутов и устанавливает документ. название. Примечание: этот запрос на растяжение не передает controller и model в качестве параметров.

Если вы предпочитаете эквивалент Coffee Script: Ember.js: простой и чистый способ установить заголовок страницы.

Ответ 4

После продолжительного обсуждения этого запроса на тягу было решено, что это не относится к ядру. Существует компонент и ember-cli addon, который реализует функциональность.

Ответ 5

Я использовал следующий метод с Ember 1.4.0:

App.PageTitle = Ember.Object.create({
    defaultTitle: 'This route has no title defined'
});

RouteWithTitle = Ember.Route.extend({
    activate: function() {
            if ('title' in this){
                document.title = this.title;
                App.PageTitle.set('title',this.title);
            }else{
                document.title = App.PageTitle.defaultTitle;
                App.PageTitle.set('title',this.title);
            }
    }
});

App.ExampleRoute = RouteWithTitle.extend({
    title: 'This is an example route'
});
App.AnotherRoute = RouteWithTitle.extend({
    title: 'This is another route'
});

(Как и ответ Михаи Мазери.)

Вы можете определить заголовок для каждого маршрута, используя свойство title. Заголовок страницы будет автоматически обновляться, и вы можете вызвать заголовок в любом шаблоне дескрипторов, используя {{App.PageTitle.title}}

Ответ 6

У меня такой же вопрос.

Примечание. Чтобы изменить начальный заголовок, отредактируйте app/index.html

Вместо простого и благословенного способа (Ember devs заняты более важными вещами, я уверен), ответ, который я нашел наиболее изящным, был из CodeJack, найденного здесь:

// file: app/helpers/head-title.js    

import Ember from 'ember';

export function headTitle(title) {
  Ember.$('head').find('title').text(title);
}

export default Ember.Helper.helper(headTitle);

теперь в любом шаблоне просмотра вы можете просто добавить помощника

{{head-title 'View Header'}}

Отредактировано: Обновлен код для Ember 2.0

источник: Ember Handlebars Шаблоны в теге <head>

Ответ 7

Быстрый и грязный подход на ваших маршрутах:

actions: {
  didTransition: function() {
    Ember.$('title').text('My awesome page title');      
  }
}

Ответ 8

Вы можете использовать адронный заголовок с заголовком. Это действительно просто и чисто.