Question

设置网页标题的最佳方法是什么，以便在网址之间转换时，标题会反映新状态？有没有办法设置路由器这样做？

我想要一个允许我为每个状态设置页面标题架构的方法。因此，如果路由有参数，它们将被传递到pageTitle：

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

我愿意接受有关如何在模型或其他地方实现此类功能的最佳建议。

Answer 1

之前的答案适用于旧版本的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');
    }
});

修改：如评论部分所述：

仅供参考activate是API方法，而不是enter - 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类绑定到导航项并设置页面标题;或者你可以为navitem模型上的标题提供一个属性，你可以通过上下文（但我相信你必须在视图中处理它并从那里过渡到路径）。

无论如何，这只是为了展示设置页面标题的可能方法之一。

编辑：我已修改现有的小提琴来做到这一点。请查看路由器中的方法navigateTo：http://jsfiddle.net/schawaska/hEx84/（看它正在运行到http://jsfiddle.net/schawaska/hEx84/show/）

Answer 2

当我努力想出一个很好的模式来设置页面标题时，使用最新的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原生支持：Router now observes the 'title' property on route handlers and sets document.title。 注意：此拉取请求似乎未将controller和model作为参数传递。

如果您更喜欢Coffee Script等价物：Ember.js: An easy and clean way to set the page title。

Answer 3

我采用了这种方法：

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出现了一些问题，至少对我的情况来说这更加可靠和清洁。

Answer 4

在long discussion on this pull request之后，确定这不属于核心。有component and ember-cli addon实现功能。

Answer 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'
});

（与Micha Mazaheri的回答相似。）

您可以使用title属性为每个路线定义标题。页面标题将自动更新，您可以使用{{App.PageTitle.title}}

在任何车把模板中调用标题

Answer 6

我有同样的问题。

注意：您可以通过编辑app/index.html

来更改起始标题

代替简单的＆amp;幸运的方式（Ember开发人员忙于更重要的事情，我确定），我发现最优雅的答案来自 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);

现在在任何视图模板中，您只需添加帮助

即可

{{head-title 'View Header'}}

编辑：更新了Ember 2.0的代码

来源：Ember Handlebars Templates in <head> tag

Answer 7

路线中快速而肮脏的方法：

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

使用ember.js设置页面标题

7 个答案: