Setting page title with ember.js

What is the best way to set the page's title, so that when transitioning between urls, the title will reflect the new state? Is there a way to set the Router to do this?

I want a method that allows me to set a page title schema for each state. So, if the route has parameters, they will be passed into the pageTitle:

sessions : Ember.Route.extend({
       route:"/sessions",
       connectOutlets : function(router) {
           //...
       },
       pageTitle:function(){
            return "Sessions";
       },
   })

I'm open to any suggestions as to how it is best to implement this type of functionality on the Model or someplace else.

标签： ember.js

7条回答

家丑人穷心不美

2楼-- · 2020-02-04 07:37

I had the same question.

Note: That you can change the starting title by editting app/index.html

In lieu of a simple & blessed way (Ember devs are busy on more important things I'm sure), the answer I found most elegant was from CodeJack found here:

// 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);

now in any view template you can just add the helper

{{head-title 'View Header'}}

Editted: Updated code for Ember 2.0

source: Ember Handlebars Templates in <head> tag

0人赞添加讨论(0) 举报

倾城　Initia

3楼-- · 2020-02-04 07:38

As I struggled a lot to figure out a nice pattern to setup the page title, with the lastest Ember.js (1.0.0 RC7), I decided to create a subclass of 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');
    },
});

Probably this will be natively supported by Ember.js if this pull request is merged: Router now observes the 'title' property on route handlers and sets document.title. Note: this pull request doesn't seem to pass controller and model as parameters.

If you prefer the Coffee Script equivalent: Ember.js: An easy and clean way to set the page title.

0人赞添加讨论(0) 举报

贪生不怕死

4楼-- · 2020-02-04 07:44

After a long discussion on this pull request it was decided that this didn't belong in core. There is a component and ember-cli addon that implements the functionality.

0人赞添加讨论(0) 举报

唯我独甜

5楼-- · 2020-02-04 07:47

I used the following method with 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'
});

(Similar to Micha Mazaheri's answer.)

You can define a title for each route using the title property. The page title will be automatically updated, and you can call the title in any handlebars template by using {{App.PageTitle.title}}

0人赞添加讨论(0) 举报

Evening l夕情丶

6楼-- · 2020-02-04 07:47

A quick and dirty approach, in your routes:

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

0人赞添加讨论(0) 举报

不美不萌又怎样

7楼-- · 2020-02-04 07:58

I took this approach:

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)
        }
   }
})

A few issues came up with using navigateTo, this ended up being more reliable and cleaner for my situation at least.

0人赞添加讨论(0) 举报

1 2 下一页

Setting page title with ember.js

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间