1

テンプレート

<script type="text/x-handlebars">
    <div>
        <ul id="navbar">
            <li>{{#linkTo 'projects'}}Projects{{/linkTo}}</li>
            <li>{{#linkTo 'about'}}About{{/linkTo}}</li>
        </ul>
    </div>
    {{outlet}}
</script>

<script type="text/x-handlebars" id="projects">
    <div class="l-wrap">
        <table class="list">
            <thead>
                <tr>
                    <th>Project Name</th>               
                </tr>
            </thead>
            <tbody>
                {{#each model}}
                <tr>
                    <td>{{#linkTo 'project' this}}{{name}}{{/linkTo}}</td>
                </tr>
                {{/each}}               
            </tbody>
        </table>        
    </div>
    <div>
    {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" id="project">
    <p>Project Details for {{name}}</p>
    <p>Description: {{description}}</p>
</script>

ルート 1

  this.resource('projects', function() {
    this.resource('project', { path: ':project_id'});   
  });

ルート 2

  this.resource('projects');
  this.resource('project', { path: 'project/:project_id'});

問題

私が達成しようとしているのは、プロジェクトのリンクをクリックすると、プロジェクトのリストが表示されることです。リスト内のプロジェクト名をクリックすると、リストが消えて、クリックしたプロジェクトの詳細が表示されます。

ルート 1の配置では、プロジェクトの一覧が消えません。だから使えない。

ルート 2の配置では、プロジェクトのリストが消え、プロジェクト リンクの CSS 'active' クラスが消えることを除いて、すべてが期待どおりです。私はまだプロジェクト セクションにいるので、「アクティブな」クラスをなくしたくありません。

どうすればこれを達成できますか？

4

1 に答える 1

1

indexルートのルートを使用しprojectsて最初のリストを表示することで、目標を達成できます。

Route 1と同じルーターを使用します。

App.Router.map(function(){
  this.resource('projects', function() {
    this.resource('project', { path: ':project_id'});   
  });
});

projectただし、アウトレットのみを含むようにテンプレートを構成します。

<script type="text/x-handlebars" id="projects">
    <p>Projects</p>
    {{outlet}}
</script>

次に、元のprojectsテンプレートをprojects/index次の場所に移動します。

<script type="text/x-handlebars" id="projects/index">
    <p>Projects Index</p>
    <div class="l-wrap">
        <table class="list">
            <thead>
                <tr>
                    <th>Project Name</th>               
                </tr>
            </thead>
            <tbody>
                {{#each model}}
                <tr>
                    <td>{{#linkTo 'project' this}}{{name}}{{/linkTo}}</td>
                </tr>
                {{/each}}               
            </tbody>
        </table>        
    </div>

</script>

にリンクすると、projectsが入力されます。特定のプロジェクトにリンクすると、 が詳細ルートprojects.indexに置き換えられます。projects {{outlet}}project

JSBin の例

注:ルート 2がアクティブなクラスを保持しない理由は、2 つの並列ルート パスを定義したためです。そのため、別のルート パスに切り替えると、アプリはアプリの別の領域に移動したと見なします。Ember のルーターは、ルートのネストを使用して、保持するリンクを決定しますactive。

ヒント: トランジションのロギングを有効にして、どのルートに入ろうとしているかを把握するのに役立ててください

App = Ember.Application.create({
  LOG_TRANSITIONS: true
});
于 2013-08-16T20:23:01.990 に答える