55

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

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

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

4

5 に答える 5

30

Jon Goldの答えは以前は正しかったが、Meteor 0.5.4の時点では：

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

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

于 2013-11-17T23:39:15.710 に答える
29

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

私が提案するのは、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});
});

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

backbone.jsルーターの詳細については、http：//backbonejs.org/#Routerを参照してください。

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

お役に立てれば。

于 2012-07-31T13:40:49.367 に答える
26

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

使用するには…</p>

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'
});

テンプレート内…</p> 

<body>{{renderPage}}</body>
于 2013-02-02T14:15:59.670 に答える
10

私は同じ問題を見つけました。コードが大きくなると、コードをクリーンに保つことが困難になります。

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

別の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>

次にuser.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';
}

最後に、バックボーンルーターがこのセッション変数を管理します

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開発者に役立つことを願っています。

于 2013-01-26T10:38:43.820 に答える
7

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

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

于 2012-07-31T22:21:14.453 に答える