Question

我一直试图围绕Ember路由如何在一个非常基本的层面上工作，并需要在正确的方向上踢一点。我提供了我到目前为止编写的代码，希望你能跟进并看看发生了什么

我希望看到页面层次结构，如下所示：

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模板（只需要一点#link-to把手进行导航... ...这样我就可以看到一个正常工作的原型。

主模板就在这里

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

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

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

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

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

注意：我也理解我可以重复使用模板并将不同的模型数据加载到它们中，而不是硬编码大量的小模板......但我只是试着专注于学习路由。

因为这些只是基本模板，我假设（根据我所读到的）Ember自动生成很多MVC，我不需要定义任何特定的控制器，模型或路由（除了可能是三个主要颜色着陆页的IndexRoutes。）

据我所知，模板的命名约定将有助于ember完成大部分工作。

然而，令我困惑的是命名惯例。
在router.js中的
似乎很简单，根据我希望它出现在网址中的方式来定义路线

在把手{{#link-to}}中，看起来我需要引用带有.分隔的URL（或模板？）名称（包括短划线或否）？

并且在定义索引路由时，它使用PascalCase构建？

我需要一些帮助来弄清楚如何正确地命名/声明这些路线，以便Ember能够正确地渲染它们。

例如：由于这些页面的嵌套特性......我是否还需要将模板存储在嵌套目录文件结构中？或者是通过ember路由人工完成的？

在我能够理解Ember路由之前，我是否应该了解一般的MVC路由方法？

对不起，我对此有很多疑问......看起来它应该很简单，但我不知道为什么我没有得到它。任何帮助将不胜感激。

编辑：我还会告诉您，正如我目前所写的那样，Ember Inspector并没有抛出任何我能看到的错误。所以我确信，到目前为止我处于正确的轨道上，但我只是没有为路由器提供任何解决方案......

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

0 个答案: