Meteor.js: роутинг


Сейчас стало модно использовать Full-stack javascript framework'и и я тоже решил понять, что это такое. Под катом я попытаюсь обяснить как реализовать роутинг при работе с Meteor.js.

Как настраивать Meteor, да и вообще что это такое и зачем нужно, я рассказывать не буду, так как сегодня за меня это сделал товарищ cryptograf, за что ему спасибо.

Meteor.js и роутинг


Все мы прекрасно понимаю что делая более-менее крупные single-page проекты, нам необходим роутинг. Meteor нативного при себе не имеет, но спасибо сторонним разработчикам. В данной статье мы рассмотрим iron-router.

iron-router


Установить данное чудо можно как и многие другие пакеты через atmosphere:
mrt add iron-router

А теперь давайте разбираться. Создание маршрутов очень просто:
Router.map(function () {
  this.route('index', {  // создается маршрут к /, который будет рендерить шаблон index
    path: '/'
  });
  this.route('login'); // создается маршрут к /login, который будет рендерить шаблон login
});

Так же мы можем указывать определённый шаблон параметром template, принимать переменные через path и отдавать данные в шаблон с помощь data:
this.route('post', {
  template: 'posts',
  path: '/posts/:_id',
  data: {
      lists: todoLists.find()
    }
}

Подробнее можно почитать здесь.

В общих чертах с созданием маршрутов мы разобрались. Теперь интересная штука, iron-router по умолчанию рендерить шаблоны в конец body, но например мне это не нравится. Исправить данный грех библиотеки можно легко:
Router.configure({
  autoRender: false
});

И в нужном месте нашего html вставляем {{renderRouter}}
<body>
	{{> header}}
	<div class="container">
		{{renderRouter}}
	</div>
</body>


Применение полученных знаний


Давайте реализуем ToDo с различными списками!
Создаём шаблоны:
<body>
	{{> header}}
	<div>
		{{renderRouter}}
	</div>
</body>



<template name="header">
	<div><h2>ToDo<h2></div>
</template>

<template name="todoLists">
	<ul>
	{{#each lists}}
		{{> todoListsElement}}
	{{/each}}
	</ul>
</template>

<template name="todoList">
	<h4>{{todo.name}}</h4>
	<ul>
	{{#each elements}}
		{{> todoListElement}}
	{{/each}}
	</ul>
</template>

<template name="todoListElement">
	<li>{{name}}</li>
</template>

<template name="todoListsElement">
	<li><a href="{{pathFor 'todoList'}}">{{name}}</a></li>
</template>

<template name="404">404</template>


Настраиваем роутинг:
Router.configure({
  autoRender: false,
  notFoundTemplate: '404'
});

Router.map(function () {
  this.route('todoLists', {
    path: '/',
    data: {
      lists: todoLists.find()
    }
  });

  this.route('todoList', {
    path: '/todo/:_id',
    data: function() {
      return {
        todo: todoLists.findOne({_id: this.params._id}),
        elements: todoListElements.find({todo_id: this.params._id})
      }
    }
  });
});

И конечно же коллекции:
todoLists = new Meteor.Collection("TodoLists");
todoListElements = new Meteor.Collection("TodoListElements");


Теперь запускаем проект и идёт проверять.
Чтобы добавить новый список используем консоль бразуера:
todoLists.insert({name: 'My ToDo List'});

В консоль вернётся ID, он нам нужен чтобы добавить элемент в список:
todoListElements.insert({todo_id: "vEnWrM2GPNYjt5kkL", name: "My first element in ToDo"});

Исходники можно найти тут.

Надеюсь что моя первая статья Вам понравилась и я буду писать ещё, так как есть много не затронутых тем про Meteor.js.
Tags:
meteorjs, javascript, fullstack development

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.