Ember.js Ember JS超级基本路由，仅使用静态模板

我一直在努力思考余烬路由是如何在一个非常基本的层面上工作的，需要在正确的方向上踢一脚。我提供的代码，我已经写了到目前为止，希望你可以跟随，看看发生了什么

我希望看到这样的页面层次结构：

index
--Red
----Light
----Medium
----Dark
--Green
----Light
----Medium
----Dark
--Blue
----Light
----Medium
----Dark

“中等”颜色实际上是每个嵌套路由的索引，所以我想我需要

router.js

这样设置：

Colors.Router.map(function(){
    this.resource('red', { path: '/red' }, function(){
      this.route('light-red');
      this.route('dark-red');
    });
    this.resource('green', { path: '/green'}, function(){
      this.route('light-green');
      this.route('dark-green');
     });
    this.resource('blue', { path: '/blue'}, function(){
      this.route('light-blue');
      this.route('dark-blue');
    });
   });

现在，我只想提供静态html模板（只需要一点

#链接到导航用的把手）。。。这样我就可以看到一个工作的原型

主模板在这里

<div id="emberColors">
    <header id="mainHeader">
      <h1>Ember Colors</h1>
      <p>Pick a color</p>
      <nav class="navi main">
        <ul>
          <li>{{#link-to "red" activeClass="active"}}Red{{/link-to}}</li>
          <li>{{#link-to "blue" activeClass="active"}}Blue{{/link-to}}</li>
          <li>{{#link-to "green" activeClass="active"}}Green{{/link-to}}</li>
        </ul>
      </nav>
    </header>

{{outlet}}

<footer id="footer">
  <p>Ok Buh-bye</p>
</footer>


余烬颜色
挑选颜色


{{{#链接到“red”activeClass=“active”}}红色{{/link to}
{{{#链接到“blue”activeClass=“active”}}blue{{/link到}}
{{{#链接到“green”activeClass=“active”}绿色{{/link to}}

{{outlet}}
好的，再见



我为三种颜色中的每种都有一个模板，每种颜色的设置如下：

<section id="blue">
  <header>
    <h1>The Blue</h1>
    <p>Blue is cool.</p>
    <nav class="navi sub">
      <ul>
        <li>{{#link-to "blue.light-blue"}}Light{{/link-to}}</li>
        <li>{{#link-to "blue"}}Base{{/link-to}}</li>
        <li>{{#link-to "blue.dark-blue}}Dark{{/link-to}}</li>
      </ul>
    </nav>
  </header>

  {{outlet}}

</section>


蓝色
蓝色很酷


{{{链接到“blue.light blue”}轻{{/链接到}
{{{#链接到“蓝色”}基{{/link到}}
{{{链接到“蓝色.深蓝色}}深{{/链接到}

{{outlet}}

我将每个“阴影”分解成多个模板

<div class="color-lt">
  <p>Light Blue</p>
</div>


浅蓝色


注意：我也知道我可以重用模板并将不同的模型数据加载到模板中，而不是硬编码许多小模板……但我现在只想专注于学习路由

因为这些只是基本的模板，所以我假设（根据我所读的内容）Ember auto会生成很多MVC，并且我不需要定义任何特定的控制器、模型或路由（除了三个主彩色登录页的IndexRoutes）

我知道模板的命名约定将帮助ember完成大部分工作

然而，让我困惑的是命名约定

在
router.js
中，通过我希望它在URL中的显示方式来定义路由似乎足够简单

不过，在Handlebar
{{{#link to}}
中，我似乎需要引用带有
分隔符（包括破折号或否）的URL（或模板？）名称

当定义索引路由时，它是用PascalCase构造的

我需要一些关于如何正确命名/声明这些路由的帮助，以便Ember能够正确地呈现它们

例如：由于这些页面的嵌套性质…我是否也需要将模板存储在嵌套的目录文件结构中？或者这是由ember路由人为完成的

在我能够具体理解Ember路由之前，我是否应该理解一种通用的MVC路由方法

对不起，我有很多关于这个的问题…看起来它应该是非常简单的，但我不知道为什么我没有得到它。任何帮助将不胜感激

编辑：我还将告诉您，正如我目前所写的，Ember Inspector没有抛出任何我能看到的错误。因此我确信，到目前为止，我的思路是正确的，但我只是没有提供任何东西供路由器解决…
我建议您开始使用Ember cli，它解决了大部分Ember问题约定设置可轻松启动您的ember应用程序。哦，我的印象是ember cli仍在开发中，尚未准备好投入生产？请与位于#emberjs的irc的人员交谈。我不在我的项目中使用它，但我知道有人已经在他们的项目中采用了它。它肯定会解决与您有关的大多数问题r项目结构和构建工具。那么，如果您自己不使用它，您如何建议我使用能够解决我的问题的东西呢？我的项目的构建设置很复杂，它基于一个花椰菜设置，可以在服务器端预编译模板。一个类似的演示示例位于：。我的许多构建设置配置都是iN在ember cli上启动。根据您的舒适程度，您可以自己启动或使用工具作为ember cli。基于您的问题，我建议您使用ember cli，也许我错了。