web-dev-qa-db-ja.com

Meteorでマルチページアプリケーションを作成するにはどうすればよいですか？

私はJavascriptを初めて使い、Meteorを好奇心からいじり始めました。本当に驚いたのは、すべてのHTMLコンテンツが1つのページにまとめられているように見えることです。

特別なページにリダイレクトするURLの処理を導入する方法があると思います。 「todo」の例は、何らかの種類のRouterクラスを介してこれを行うことができるようです。それはURL処理の「標準的な」方法ですか？

URLを処理できると仮定すると、HTMLコードをどのように構成して個別のページを表示できますか？私の場合、それぞれが完全に別個のデータセットを持つことができるため、HTMLコードをまったく共有する必要はありません。

javascripturl-routingmeteor
55
Marcus Riemer

ジョンゴールドの答えは以前は正しいものでしたが、 Meteor 0.5.4以降 ：

現在、作業はIron Routerに移行しています。新しいプロジェクトでルーターの代わりにIRを使用することを検討してください！

したがって、これを行う現在の「標準的な」方法は、おそらく IronRouter を使用することです。

30
user456584

私の知る限り、これを行うためのすぐに使える方法は現在ありません。

Backbone.jsスマートパッケージを使用することをお勧めします。 Backbone.jsにはプッシュ状態ルーターが付属しており、ユーザーのブラウザーがそれをサポートしていない場合、ハッシュURLにフォールバックします。

あなたの流星アプリのディレクトリにこのmeteor add backbone。

次に、クライアント側のコードのどこかに次のようなBackbone.jsルーターを作成します。

var Router = Backbone.Router.extend({
  routes: {
    "":                 "main", //this will be http://your_domain/
    "help":             "help"  // http://your_domain/help
  },

  main: function() {
    // Your homepage code
    // for example: Session.set('currentPage', 'homePage');
  },

  help: function() {
    // Help page
  }
});
var app = new Router;
Meteor.startup(function () {
  Backbone.history.start({pushState: true});
});

次に、Handlebarsテンプレートのどこかで、セッションの「currentPage」で設定された値に基づいてページをレンダリングするヘルパーを作成できます。

Backbone.jsルーターの詳細については、こちらをご覧ください： http://backbonejs.org/#Router

MetoerでHandlebarsヘルパーメソッドを作成する方法に関する関連情報もここにあります。 http://docs.meteor.com/#templates

お役に立てれば。

29
nsmeta

Meteor-Router はこれを本当に簡単にします。私は望遠鏡を参考にして構築しているいくつかのアプリでそれを使用しています。望遠鏡の router.js をご覧ください

使用するには…

mrt add router

Client/router.jsで：

Meteor.Router.add({
  '/news': 'news', // renders template 'news'

  '/about': function() {
    if (Session.get('aboutUs')) {
      return 'aboutUs'; //renders template 'aboutUs'
    } else {
      return 'aboutThem'; //renders template 'aboutThem'
    }
  },

  '*': 'not_found'
});

テンプレートで…

<body>{{renderPage}}</body>
26
Jon Gold

同じ問題が見つかりました。コードが大きくなると、コードをきれいに保つことが困難になります。

この問題に対する私のアプローチは次のとおりです。

別のWebフレームワークで行うように、異なるhtmlページを分離します。 index.htmlここで、ルートhtmlページを保存します。そして、大きな機能部分ごとに異なるテンプレートを作成し、1つの異なるhtmlに配置します。その後、Meteorはそれらすべてをマージします。最後に、operationというセッション変数を作成します。ここで、毎回表示するものを定義します。

簡単な例を示します

index.html

<head>
  <title>My app name</title>
</head>

<body>
 {{> splash}}
 {{> user}}
 {{> debates}}
</body>

次に、splash.html

<template name="splash">
    {{#if showSplash}}
      ... your splash html code goes here...
    {{/if}}
</template>

次に、ser.html

<template name="user">
    {{#if showUser}}
      ... your user html code goes here...
    {{/if}}
</template>

等々 ...

JavaScriptコードでは、次のようにSession変数を使用して各テンプレートをいつ印刷するかを確認します。

Template.splash.showSplash = function(){
    return Session.get("operation") == 'showSplash';
}

最後に、Backbone Routerがこのセッション変数を管理します

var DebateRouter = Backbone.Router.extend({

  routes: {
    "": "showSplash",
    "user/:userId": "showUser",
    "showDebates": "showDebates",
    // ...
  },
  splash: function () {
   Session.set('operation', 'showSplash');
   this.navigate('/');
  },
  user: function (userId) {
   Session.set('operation', 'showUser');
   this.navigate('user/'+userId);
  },
  // etc...
});

このパターンが他のMeteor開発者に役立つことを願っています。

10
Carlos Barcelona

これはルーティングに対する私のハッキングソリューションです： https://Gist.github.com/3221138

/ {name}に移動して、テンプレート名としてページ名を入力するだけです

7
Lander Van Breda