Meteorのあんちょこ꒰｡･ω･`;꒱ Routes編

概要：FlowRouter（kadira:flow-router）

• URLs and Routing @ Meteor Guide

• Routing Guide for Meteor Apps @ KIDIRA

• Meteor 0.Xの頃は、Iron Router を使用することが多かった？

• Meteor Guideでは、FlowRouter（kadira:flow-router） が紹介されている。

サンプル

console

$ meteor create --example todos
To create the todos example, please run:      
  git clone https://github.com/meteor/todos  
$ git clone https://github.com/meteor/todos   
$ cd todos
$ rm -rf .git
$ meteor

Hello, routes!

1.プロジェクト作成

console

$ meteor create routes

2.パッケージインストール

console

$ meteor add kadira:flow-router
# 動作確認
$ meteor 

3.最初のルーティング

• client/main.html...削除
• client/main.js→index.js...リネーム

client/index.js

import './routes.js';

client/routes.js

import { FlowRouter } from 'meteor/kadira:flow-router';

FlowRouter.route('/lists/:_id', {
  name: 'Lists.show',
  action(params, queryParams) {

    // ex. http://localhost:3000/lists/2

    console.log('[FlowRouter.getRouteName]' + FlowRouter.getRouteName()); // Lists.show

    console.log('[FlowRouter.getParam]' + FlowRouter.getParam('_id')); // 2

    // console.log('[FlowRouter.getQueryParam]' + FlowRouter.getQueryParam('data'));

    console.log('[params._id]' + params._id);  // 2

    alert("Hello, routes!");
  }
});

• 動作確認
• "localhost:3000/lists/1"にアクセスすると、"Hello, routes!"のアラートが表示される。
• params._idで、_idを取得できる。

console

# 動作確認
$ meteor 

browser-console

[FlowRouter.getRouteName]Lists.show
[FlowRouter.getParam]2
[params._id]2

アクティブルートのハイライト

console

meteor add kadira:blaze-layout

• Rendering Blaze Templates