Jan 14 2014 at 21:07

Meteor.js: роутинг

Invite pending

Сейчас стало модно использовать 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:

Hubs: