ember.js - Ember.js でのルーティングを理解する

Question

Ember のルーティングの概念を理解するのに本当に苦労していますが、見た目よりも複雑です。ドキュメントから。URLまたはパスが異なる場合は常に異なるルートがあることがわかります。同じURLに異なるパスがある場合は、ネストされたテンプレートを作成するだけで簡単です。しかし、1 つの URL に 3 つの異なるパスがある場合はどうでしょうか。

this.resource と this.route の違いは何ですか?

実際の例は常に純粋な理論よりも優れているため、ここに私のアプリを示します。インデックスまたは '/' では、「リスト テンプレート」、「新しいテンプレート」をレンダリングする必要があります。ユーザーがリスト リンクをクリックすると、「新しいテンプレート」ではなく「メモ テンプレート」がレンダリングされます。

私のルーター：

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>

または、Js Bin: http://jsbin.com/oWeLuvo/1/edit?html,js,output

コントローラーまたはモデルが必要な場合は、そのコードも追加します。前もって感謝します