了解Ember.js中的路由

我真的很难理解余烬中的路由概念，但它比看起来更复杂。从医生那里。当有不同的url或路径时，您可以看到您有不同的路由，如果在同一url中有不同的路径，那么您只需要创建一个嵌套模板。 但是当你在一个url中有3个不同的路径时呢

这个资源和这个路线有什么区别

由于活生生的例子总是比纯粹的理论好，这里是我的应用程序。 在索引或“/”中，我应该呈现“列表模板”、“新模板”，当用户单击列表链接时，“注释模板”将呈现为“新模板”

我的路由器：

Notes.Router.map(function () {
  this.resource('index', { path: '/' }, function (){
    this.resource('list', {path: ':note_title'});
    this.resource('new', {path: '/'});
this.resource('note', { path: ':note_id' });
});
});

我的模板：

<script type="text/x-handlebars" data-template-name="index"> 
  <div class="wrap">
    <div class="bar">
    {{input type="text" class="search" placeholder="Where is my bookmark??" value=search action="query"}}

      <div class="bar-buttons">
        <button {{action "addNote"}}> NEW </button>
      </div>
    </div>
    {{outlet}}
  </div> 
</script>

<script type="text/x-handlebars" data-template-name="list">
<aside>
  <h4 class="all-notes">All Notes {{length}}</h4>
    {{#each item in model}}
      <li>
       {{#link-to 'note' item}} {{item.title}} {{/link-to}}
      </li>
    {{/each}}
</aside>
</script>

<script type="text/x-handlebars" data-template-name="new"> 
   <section>
    <div class="note">
      {{input type="text" placeholder="Title" value=newTitle action="createNote"}}
      <div class="error" id="error" style="display:none"> Fill in the Title! </div>

      {{input type="text" placeholder="What you need to remember?" value=newBody action="createNote"}}
      {{input type="text" placeholder="Url:" value=newUrl action="createNote"}}
    </div>
   </section>
 </script>

  <script type="text/x-handlebars" data-template-name="note"> 
    <section>
        <div class="note">
            {{#if isEditing}}
              <h2 class="note-title input-title"> {{edit-input-note value=title focus-out="modified" insert-newline="modified"}} </h2>
              <p class="input-body"> {{edit-area-note value=body focus-out="modified" insert-newline="modified"}} </p>
              {{edit-input-note value=url focus-out="modified" insert-newline="modified"}}
            {{else}}
              <h2 {{action "editNote" on="doubleClick"}} class="note-title" > {{title}} </h2>
              <button {{action "removeNote"}} class="delete"> Delete </button>
              <p {{action "editNote" on="doubleClick"}}> {{body}} </p>
              {{input type="text" placeholder="URL:" class="input"  value=url }}
            {{/if}}
        </div>
      </section>
  </script>

{{input type=“text”class=“search”placeholder=“我的书签在哪里？”“value=search action=“query”}
新的
{{outlet}}

如果需要我的控制器或模型，我也会添加代码。
提前感谢
您的示例似乎有效

你只是错过了依赖关系。您还没有包括车把和Ember.data

如果您检查了javascript控制台，就会看到抛出的错误

工作示例：
在余烬中，资源和路由都是路由。它们有两个名称，以便Ember区分资源和路由。老实说，记住它们都是路线，为了保持理智，你可以将它们分别称为“资源路线”和“路线”。资源可以嵌套，并在其中嵌套子资源或路由。另一方面，路由不能嵌套任何内容

如果尚未使用余烬检查器，请安装它。它是一个chrome的扩展，可以帮助您在Ember中安装路由、控制器、模板、数据和其他许多东西，这些都可以安装到chrome Web浏览器中。我最后一次听说Ember Inspector也在FireFox开发工具中提供

因此，如果您有一个资源，您可以嵌套一个资源和一个路由。嵌套的资源将保留其名称空间，路由将附加到嵌套的名称空间。请记住，不能在路线中嵌套任何内容

 App.Router.map(function() {
   //creating a resource
   this.resource('foo', {path: 'somePathYouPut'}, function() {
     //nesting stuff inside of the resource above

     //could open another nest level here in bar if you want
     this.resource('bar');

     //can not nest in route. Sad face. Sorry
     this.route('zoo');
   });
 });

由于无法将任何内容嵌套到路由中，
索引
模板中的{outlet}没有任何子级可查找，默认情况下，并呈现到该{{outlet}中。我相信这就是你认为会发生的事情

 <script type="text/x-handlebars" data-template-name="index"> 
   <div class="wrap">
     <div class="bar">
       {{input type="text" class="search" 
         placeholder="Where is my bookmark??" value=search action="query"}}

     <div class="bar-buttons">
     <button {{action "addNote"}}> NEW </button>
    </div>
  </div>
  {{outlet}}
 </div> 
</script>

您可以在每个嵌套级别上获得一个
索引
，从应用程序级别的最顶层开始，但您不必在路由器中明确定义它们，它们就在那里。默认情况下，在每个嵌套级别免费获得的
索引
路由与其直接父级关联，并默认渲染到其父级“outlet”中。你可以想象路由器是这样的

仅供说明之用：

Notes.Router.map(function() {
  //think of this as your application level stuff that Ember just does!!
  //this is not written like this but to illustrate what is going on
  //you would get application template, ApplicationRoute, ApplicationController
  this.resource('application', function() {

    //this is an index that you get for free cause its nested
    //its that index template, IndexController, and IndexRoute you were using
    this.route('index', { path: '/' });

    this.resource('foo', {path: 'somePathYouPutHere' }, function() {
      //since you started another nested level surprise you get another `index`
      //but this one is `foo/index` template.
      this.route('index', {path: '/'});
      this.route('zoo');
    });
  });
});

上面夸张的路由器示例的第一部分，余烬在幕后自动执行，这是你听到的“魔力”的一部分。它做两件事：为自己设置一个应用程序环境，然后在幕后获得
应用程序路由
，
应用程序控制器
，以及
应用程序
模板。其次，它创建了
索引
，您可以使用或忽略
IndexController
、IndexRoute和
索引
模板。所以，如果您不做任何其他操作，就不会有其他代码在文件中声明和删除应用程序，如
var-App=Ember.Application.create（）
并打开Ember Inspector，查看路线，您将看到上述资产

现在，上面路由器中的资源
foo
就是一个资源示例，您可以在其中创建
索引，因为您开始嵌套。如上所述，您不必在每个嵌套级别定义索引，
this.route（'index'，{path:'/'}）从内部
foo
可以完全省略，余烬仍然会做同样的事情。您将得到
foo/index
模板、
FooIndexRoute
、
FooIndexController
以及预期的
foo
模板、
foooroute
和FooController
。你可以把
foo
索引想象成一个地方，在其他任何东西进入我的父对象
foo`并呈现之前，它会说‘嘿’。如果你愿意，我可以展示一些东西，请使用我

在上面的示例中，当您将路由嵌套在类似
This.route（'zoo'）
的资源中时，这也是强调名称空间发生了什么的好时机。路由
zoo
的名称空间现在将被追加到resource
foo
中，您将得到
foo/zoo
模板、
FooZooRoute
和
FooZooController

如果要将zoo更改为嵌套在foo资源
this.resource（'zoo'）中的资源名称空间将保留一段时间。您将得到“zoo”模板、
ZooRoute
和
ZooController
。保留名称空间。好了，够了，你的应用呢

Notes.Router.map(function() { 
  this.resource('list', {path: '/'});
  this.resource('new');
  this.resource('note', { path: ':note_id' });
});

您说过希望应用程序的
/
url呈现
列表模板。为了实现这一点，您必须覆盖灰烬启动时发生的默认行为。通过将
{path:'/'}
添加到路由器中的第一个资源或路由，可以覆盖顶层
/
。从第一个
索引上方的假路由器代码中，您得到的路由与应用程序相关联。默认情况下，如果不执行任何操作，Ember将把该
索引
模板推送到
应用程序
模板中。但是，这并不是您想要的，当您点击应用程序的
/
'的基本url时，您希望将您的
列表
模板推送到应用程序模板中<
Notes.Router.map(function() { 
  this.resource('list', {path: '/'});
  this.resource('new');
  this.resource('note', { path: ':note_id' });
});