2

Meteor、Meteor Router、および Bootstrap を使用してラピッド プロトタイピング用の簡単なプロジェクトを作成しようとしています。

ディレクトリ構造は次のとおりです

meteor-prototypes/
|
|--- .meteor/
|--- prototypes/
|    |
|    |--- example/
|         |
|         |--- example.coffee
|         |--- example.css
|         |--- example-index.html
|         |--- example-more.html
|
|--- prototypes.coffee
|--- index.html
|--- smart.json
|--- smart.lock

フォルダーは、 (exampleたとえば) で到達可能な単一のプロトタイプを表しますhttp://localhost:3000/prototypes/example/。理想的にはexample/、新しい名前 (例: new-example) で複製し、http://localhost:3000/prototypes/new-example/.

これに関する問題は、Meteor がデフォルトで、プロジェクト ディレクトリ全体で HTML ファイルを検索し、それらすべてをロードすることです。私がする必要があるのは、URL に基づいて (Meteor Router を介して) 表示しているプロトタイプを確認し、そのフォルダー内の .html ファイルのみをロードすることです (例: example/)。

特定のサブディレクトリにある .html ファイルのみを読み込むように Meteor に指示する方法はありますか? またはこれを達成する別の方法はありますか？

好奇心旺盛な人のために、またはそれが役立つ場合のために、上記のディレクトリ構造に記載されている各ファイルに何が含まれているかを次に示します。

index.html

<head>
  <title>desktime-prototypes</title>
</head>

<body>
  {{ renderPage }}
</body>

<template name="home">
    <h1>We have the following prototypes available:</h1>

    <ul>
        <li><a href="/example/">Example</a></li>
    </ul>
</template>

プロトタイプ.コーヒー

if (Meteor.isClient)

  Meteor.Router.add
    '': 'home'

    '/:prototype': (params) ->
      return params

    '/:prototype/:page': (params) ->
      return params[1]

if (Meteor.isServer)
  Meteor.startup ->
    # code to run on server at startup

/prototypes/example.coffee

if Meteor.isClient
  Template.example.greeting = ->
    return "Welcome to prototypes."

  Template.example.rendered = ->
    # This function will fire when this specific template gets rendered,
    # Great place to fire jQuery plugins, or anything else that needs
    # to happen when the DOM is ready.

  Template.example.events
    'click input' : ->
      # template data, if any, is available in 'this'
      alert 'Button clicked!'

プロトタイプ/example/example-index.html

<template name="example">
    <h1>Welcome to the example prototype!</h1>

    {{> example-more }}
</template>
4

2 に答える 2

3

素晴らしい質問です...2つのこと：

（1） meteor-router現在、必要なサーバー側のレンダリングがありません（ただし、近いですが）。

(2) HTML ファイル名は、ルーティング システムとはまったく無関係です。それらが存在するフォルダーは、それらがロードされる順序に関して重要ですが、名前は期待どおりにルートに一致しません.

探しているものを実現するには、(1) ルーティング用にアプリ内のリンクを使用しますが、アドレス バーの URL を変更せず、まだ動作することを期待し、(2) さまざまな html のテンプレート名を変更します。 /prototypes フォルダー内のファイルを、デモしたいプロトタイプと一致するようにします。以下に例を示します。

HTML:

<body>
    <h1>All Prototypes</h1>
    {{>proto}}
    <div>
        {{renderPage}}
    </div>
</body>

<template name="landing">
    LANDING
</template>

<template name="proto">
   {{#each items}}
        <a href="/prototypes/{{id}}">{{name}}</a>
    {{/each}}
</template>

Javascript:

if (Meteor.isClient) {
    Meteor.startup(function () {
        Meteor.Router.to("/landing");
    });
    Meteor.Router.add({
        '/landing': 'landing',
        '/prototypes/:page': function (proto) {
            return proto;
        }
    });
    Template.proto.items = function () {
        return [{ name: "Prototype 1", id: "prototype1" }, { name: "Prototype 2", id: "prototype2" }];
    };
}

プロトタイプ 1 HTML:

<template name="prototype1">
    <h1>Prototype 1</h1>
</template>

プロトタイプ 2 HTML:

<template name="prototype2">
    <h1>Prototype 2</h1>
</template>
于 2013-01-16T21:32:14.123 に答える
1

1 つの Meteor プロジェクト内に複数のプロトタイプが必要な理由はありますか? 彼らはコードを共有していますか? そうでない場合は、プロトタイプごとに 1 つの Meteor プロジェクトを使用してみませんか? そして、あなたができることは、次のようなことを行うコマンドラインユーティリティを自分で作成することです

meteor_proto example1
meteor_proto example2

Meteorプロジェクトを作成しますが、必要なファイルを事前に入力するだけです（理想的なプロトタイピングプロジェクトを作成してどこかに配置し、meteor createコマンドなどを実行した後、コマンドラインでそのフォルダーの内容をコピーするだけです）.

実際、これは Meteor がデフォルトで備えていると便利な機能です。

于 2013-01-16T22:03:38.600 に答える