2013-11-09 2 views
6

Как лучше всего задать заголовок HTML при использовании железа-маршрутизатора? Вот что я хотел бы сделать:Установить заголовок HTML при использовании утюга-маршрутизатора

<template name="layout"> 
    <head><title>{{KAZOOM}}</title></head> 
    <body> 
     {{> menu}} 
     {{yield}} 
    </body> 
</template> 

<template name="example"> 
    {{KAZOOM 'example page'}} 
    That's just an example page 
</template> 

<template name="foo"> 
    {{KAZOOM 'foo page'}} 
    Another example page with different HTML title 
</template> 

Вы видите, как KAZOOM путешествует назад во времени, чтобы установить заголовок HTML? Причина, по которой я хочу сделать это, заключается в том, что я считаю, что заголовок HTML является частью содержимого. Было бы неплохо, если бы я смог изменить заголовок страницы на странице, просто отредактировав шаблон, который сгенерировал его. К сожалению, я не вижу чистого способа добиться этого. Ближайшим, о котором я могу думать, будет называться yields, тогда заголовок будет задан маршрутом, а не шаблоном.

Другая возможность состоит в том, чтобы просто отказаться от шаблона макета и всегда включают в себя заголовок:

<template name="head"> 
    <head><title>{{this}}</title></head> 
    {{> menu}} 
</template> 

<template name="example"> 
    {{> head 'example page'}} 
    That's just an example page 
</template> 

<template name="foo"> 
    {{> head 'foo page'}} 
    Another example page with different HTML title 
</template> 

Это не очень приятно. У вас есть правильное решение?

+1

Ответ можно найти здесь: http://stackoverflow.com/questions/14036248/meteor-setting-the-document-title –

ответ

16

Set document.title onAfterRun в железном маршрутизаторе:

var pageTitle = 'My super web'; 
Router.map(function() { 
    this.route('user', { 
     onAfterRun: function() { 
     document.title = 'User ' + this.params.name + ' - ' + pageTitle; 
     } 
    }); 
}); 

EDIT:

Если вы хотите установить название в шаблоне, создавать пользовательские Рули помощник (клиентский код):

Handlebars.registerHelper("KAZOOM", function(title) { 
    if(title) { 
     document.title = title; 
    } else { 
     document.title = "Your default title"; 
    } 
}); 

И используйте его в своих шаблонах, как вы использовали его

{{KAZOOM 'example page'}} 

или

{{KAZOOM}} 

по названию по умолчанию.

EDIT 26 Jully 2015: для нового железного маршрутизатора это будет выглядеть так:

Router.route('/user', { 
    onAfterAction: function() { 
    document.title = 'page title'; 
    } 
}); 
+0

Спасибо, это работает для статических заголовков. Я все же предпочел бы установить заголовок в шаблоне, как и весь другой текст. – sba

+1

Что вы имеете в виду статические заголовки? Тогда я обновил ответ. –

+3

Почему бы не использовать пакет: [iron-router-title] (https://atmospherejs.com/ostrio/iron-router-title)? –

10

Я использую iron-router 0.7.1.

И есть это в libs/router.js

Router.onAfterAction(function() { 
     document.title = 'My Site - '+this.route.name; 
     } 
); 

который обрабатывает все мои маршруты, так что я не должен положить его в каждом маршруте.

+0

this.route.getName() сейчас, – IGx89

3

Я предпочитаю иметь атрибут title, сохраненный справа с определением маршрута.

Как было предложено @nullpo по этому вопросу https://github.com/iron-meteor/iron-router/issues/292#issuecomment-38508234

Router.route('/admin/users', { 
    name: 'admin_users', 
    template: 'admin_users', 
    title: 'User Manager' 
    data: function() { 
     return Meteor.users.find(); 
    }, 
    waitOn: function() { 
     return Meteor.subscribe('users_admin'); 
    } 
}); 

Router.after(function(){ 
    if (this.route.options.title) 
     document.title = this.route.options.title + ' - my cool site'; 
}); 

Надеется, что это помогает.

+0

Лучший ответ для меня!Жаль, что параметр title не переоценивается, если вы используете в нем реактивный var. Что было бы лучшим решением, если вы хотите такую ​​функциональность? – Wonko

Смежные вопросы