使用ember.js设置页面标题

设置页面标题的最佳方式是什么，以便在URL之间转换时，标题将反映新的状态？有没有办法设置路由器来实现这一点

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

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

---

对于如何在模型或其他地方最好地实现此类功能，我愿意接受任何建议。

前面的答案适用于旧版本的Ember。经过几次修改，框架已经达到了1.0RC2版本，接近最终版本，所以我决定更新这个答案

例如，请查看本手册中定义的路线：

这个想法与前面的答案相同，只是方式不同，因为路由API已经发生了很大的变化

下面的路径使用

activate

hook通过jQuery设置文档标题：

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

编辑：如评论部分所述：

FYI是API方法，而不是-

---

此答案在以前版本的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

属性，将“active”或“selected”css类绑定到导航项并设置页面标题；或者，您可以只为要通过上下文的navitem模型上的标题创建一个属性（但我相信您必须在视图中处理这个问题，并从那里转换到路线）

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

编辑：我已经修改了一个现有的小提琴来做这件事。看看路由器中的方法

navigate to

（要看到它在运行，请转到此处）

我采用了这种方法：

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时出现了一些问题，至少在我的情况下，这更可靠、更简洁。

当我用最新的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可能会本机支持此请求：注意：此拉取请求似乎没有将

控制器

和

模型

作为参数传递

---

如果您更喜欢类似的Coffee脚本：。

我在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的回答类似。）

---

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

在您的路线中使用快速而肮脏的方法在任何车把模板中调用标题：

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

---

经过一段时间后，决定这不属于核心。有一个实现该功能的方法

我也有同样的问题

注意：您可以通过编辑

app/index.html

我发现最优雅的答案来自于CodeJack，而不是简单而幸运的方式（我敢肯定，余烬开发者正在忙于更重要的事情）：

现在，在任何视图模板中，您都可以添加辅助对象

{{head-title 'View Header'}}

已编辑：更新了Ember 2.0的代码

---

资料来源：

导航到

的方法是个好主意。我已经扩展了路由器，并覆盖了
转换到
，以实现这一点。这需要对代码的其余部分进行较少的更改。FYI是API方法，而不是我喜欢的这种方法，并将选定的答案移到了这里-更容易实现，也更适合更新版本的EmberJs。谢谢这个附加组件似乎没有得到维护，尽管它显然被“采纳”。文档网站已经消失了，我真的不知道应该如何使用它。似乎一个更为更新的答案将是插件，它似乎正在更积极地维护。请参阅
$（'head'）。查找（'title'）
似乎非常无效，为什么不干脆
$（'head title'）
？该插件似乎是一堆糟糕插件中最好的。见关于余烬的讨论forum@Liamember cli文档标题不再适用于最新的ember.js，我可以看到作者忽略了其中的任何问题。这几乎描述了2020@epiroks中90%的ember插件：D@Liam我倾向于同意
{{head-title 'View Header'}}