Question

我正在尝试使用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/复制http://localhost:3000/prototypes/new-example/，就可以将另一个原型添加到项目中。

问题在于，默认情况下，Meteor会在整个项目目录中搜索HTML文件并将其全部加载。我需要做的是根据URL（通过Meteor Router）检查我们正在查看的原型，并仅加载该文件夹中的.html文件（例如example/）。

有没有办法告诉Meteor只加载特定子目录中的.html文件？或另一种方法来实现这一目标？

对于那些好奇的人，或者如果它有帮助，以下是上面目录结构中提到的每个文件包含的内容：

的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>

prototypes.coffee

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!'

原型/示例/实施例-的index.html

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

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

Answer 1

好问题......两件事：

（1） meteor-router目前缺少您需要的服务器端呈现（though it's close）。

（2） HTML文件名与路由系统完全无关。他们所居住的文件夹只要是他们加载的订单，但名称与您期望的路线不匹配。

要实现您所寻找的目标，您可以（1）使用应用程序中的链接进行路由，但不要更改地址栏中的URL并希望它能够正常工作，以及（2）更改模板名称/ prototypes文件夹中的各种html文件与您想要演示的原型相匹配。以下是一个例子：

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>

Answer 2

您是否有理由在一个Meteor项目中想要多个原型？他们分享代码吗？如果没有，为什么不在每个原型上使用一个Meteor项目？然后你可以做的是自己创建一个命令行util，它可以像

一样

meteor_proto example1
meteor_proto example2

创建Meteor项目，但只是使用您想要的文件预先填充它们（您可以创建理想的原型项目并将其放在某处，然后让您的命令行在执行{{{{{ 1}}命令或其他东西）。

这对于Meteor来说实际上是一个很好的功能。

Meteor：仅将特定子目录中的.html加载到页面中

2 个答案: