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 路由器）检查我们正在查看的原型，并仅加载该文件夹中的 .html 文件（例如example/）。

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

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

索引.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-index.html

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

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

2 回答 2

3

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

(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

您是否有理由在一个 Meteor 项目中使用多个原型？他们共享代码吗？如果没有，为什么不每个原型只使用一个 Meteor 项目呢？然后你可以做的是自己创建一个命令行工具来执行类似的操作

meteor_proto example1
meteor_proto example2

它创建 Meteor 项目，但只是用您想要的文件预先填充它们（您可以创建理想的原型项目并将其放在某个地方，然后在执行meteor create命令或其他操作后让您的命令行复制该文件夹的内容）。

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

于 2013-01-16T22:03:38.600 回答