Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Great question...two things:</p> <p><strong>(1)</strong> <code>meteor-router</code> currently lacks the server side rendering you need (<a href="https://github.com/tmeasday/meteor-router#server-side-routing" rel="nofollow">though it's close</a>).</p> <p><strong>(2)</strong> HTML file names are <em>completely irrelevant</em> to the routing system. The folders in which they live matter insofar as the order they're loaded, but the names do not match to routes the way you expect.</p> <p>To achieve what you're looking for you can (1) use links in the app for routing but don't change the URL in the address bar and expect that to work yet, and (2) change the template names of the various html files in your /prototypes folder to match the prototype you're wanting to demo. Below is an example:</p> <p>HTML:</p> <pre><code>&lt;body&gt; &lt;h1&gt;All Prototypes&lt;/h1&gt; {{&gt;proto}} &lt;div&gt; {{renderPage}} &lt;/div&gt; &lt;/body&gt; &lt;template name="landing"&gt; LANDING &lt;/template&gt; &lt;template name="proto"&gt; {{#each items}} &lt;a href="/prototypes/{{id}}"&gt;{{name}}&lt;/a&gt; {{/each}} &lt;/template&gt; </code></pre> <p>Javascript:</p> <pre><code>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" }]; }; } </code></pre> <p>Prototype 1 HTML:</p> <pre><code>&lt;template name="prototype1"&gt; &lt;h1&gt;Prototype 1&lt;/h1&gt; &lt;/template&gt; </code></pre> <p>Prototype 2 HTML:</p> <pre><code>&lt;template name="prototype2"&gt; &lt;h1&gt;Prototype 2&lt;/h1&gt; &lt;/template&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload