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'});

问题

我想要实现的是，当我单击项目链接时，它应该显示一个项目列表。当我单击列表中的项目名称时，列表应该会消失，并且应该显示单击项目的详细信息。

在Route 1排列中，项目列表不会消失。所以我不能使用它。

在Route 2安排中，项目列表消失了，一切都如我所料，除了一件事 - 项目链接中的 CSS“活动”类消失了。我仍在“项目”部分，所以我不希望“活动”课程消失。

我怎样才能做到这一点？

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

注意：Route 2不保留活动类的原因是您定义了 2 个并行路由路径，因此当您切换到另一个时，应用程序认为您已移动到应用程序的不同区域。Ember 的路由器使用路由嵌套来确定要保留哪些链接active。

提示：启用转换记录以帮助了解您正在输入的路线

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