Как добавить постоянные ссылки в метеоритный проект

 var post = Posts.insert({ title: title, content: content }); Posts.update( { _id: post }, { $set: {permalink: post} } ); 

С этим кодом мы:

1. Создание нового поста.
2. Хранение идентификатора поста в переменной с именем post .
3. Обновление указанного поста.
4. Установите в поле «постоянная ссылка» значение идентификатора записи.

Например, если вы создали сообщение с идентификатором «pCZLhbwqtGXPdTDMM», структура сообщения будет выглядеть следующим образом:

 { _id: 'pCZLhbwqtGXPdTDMM', title: 'Hello World', content: 'This is the content...', permalink: 'pCZLhbwqtGXPdTDMM' } 

Вы также можете создать постоянную ссылку на основе заголовка поста — поэтому, если заголовок поста был «Hello World», постоянная ссылка была бы «hello-world» — но это немного выходит за рамки этого урока.

Страницы сообщений

Каждому сообщению в блоге нужна отдельная страница. Для начала, эти страницы будут опираться на идентификатор сообщения, а не на постоянную ссылку (даже если в настоящее время это те же значения, которые мы только что рассмотрели).

Сначала создайте шаблон «пост» для этих страниц поста:

 <template name="post"> <h1>{{title}}</h1> <div class="entry"> {{content}} </div> </template> 

Затем создайте маршрут:

 Router.route('/post/:_id', function(){ var postId = this.params._id; this.render('post', { data: function(){ return Posts.findOne(postId); } }); }); 

В этом коде мы:

1. Извлечение поля _id из URL.
2. Сохранение этого значения в переменной «postId».
3. Получение документа на основе этого идентификатора.

В результате, если сообщение имеет идентификатор «pCZLhbwqtGXPdTDMM», это сообщение станет доступным через URL-адрес http://localhost:3000/post/pCZLhbwqtGXPdTDMM .

Вам не нужна часть «/ post» в URL, и вы можете изменить код маршрута следующим образом, чтобы удалить эту часть URL:

 Router.route('/:_id', function(){ var postId = this.params._id; this.render('post', { data: function(){ return Posts.findOne(postId); } }); }); 

После этого изменения URL-адрес той же страницы поста станет http://localhost:3000/pCZLhbwqtGXPdTDMM .

Редактирование поля «Постоянная ссылка»

Мы близки к добавлению поддержки постоянных ссылок в приложение, но сначала давайте напишем код для редактирования поля «постоянная ссылка». Для этого нам нужно обновить шаблон «post», добавив поле «permalink». Мы также добавим атрибут contentEditable в окружающий элемент div . Используя этот атрибут, мы сможем напрямую отредактировать поле постоянной ссылки на странице, хотя нам нужно будет построить логику, чтобы это работало. Полученный код шаблона показан ниже:

 <template name="post"> <h1>{{title}}</h1> <div class="permalink" contenteditable="true">{{permalink}}</div> <div class="entry"> {{content}} </div> </template> 

Чтобы создать упомянутую ранее бизнес-логику, создайте событие, которое позволит пользователям редактировать значение элемента «постоянная ссылка» и нажмите клавишу «Return», чтобы сохранить это значение в базе данных. Код для создания такого события показан ниже:

 Template.post.events({ 'keypress .permalink': function(event, template){ var permalink = template.find('.permalink').innerHTML; if(event.which === 13){ event.preventDefault(); Posts.update({_id: this._id}, {$set: {permalink: permalink}}); event.target.blur(); } } }); 

Вот как это работает:

 Router.route('/post/:permalink', function(){ var permalinkValue = this.params.permalink; this.render('post', { data: function(){ return Posts.findOne({permalink: permalinkValue}); } }); }); 

 Router.route('/post/:permalink', function(){ var permalinkValue = this.params.permalink; this.render('post', { data: function(){ return Posts.findOne({permalink: permalinkValue}); } }); }, { name: 'post' }); 

 Template.post.events({ 'keypress .permalink': function(event, template){ var permalink = template.find('.permalink').innerHTML; if(event.which == 13){ event.preventDefault(); Posts.update({_id: this._id}, {$set: {permalink: permalink}}); event.target.blur(); Router.go('post', {permalink: permalink}); } } });