Question

在尝试学习Ember时，我正在构建一个简单的博客应用程序。

我有一个帖子索引句柄模板，它显示了一个帖子列表。当一个人点击一个帖子时，我希望单个帖子替换帖子列表，而不是整个模板。

我将如何完成这项工作？

所以，例如， -

这是posts.handlebars

{{partial '_header'}}
<div class="container">
  <div class="col-sm-12 col-md-8 col-md-offset-2">
    {{#each post in controller}}
      {{ render 'post' post}}
    {{/each}}
  </div>
</div>

点击“帖子”后，我想替换

生成的代码

    {{#each post in controller}}
      {{ render 'post' post}}
    {{/each}}

使用单柱车把模板。

-

目前，这就是我的路线 -

// For more information see: http://emberjs.com/guides/routing/
Blog.Router.map(function() {
  this.resource('posts');
  this.resource('post', { path: '/posts/:post_id' });
});

我知道我们需要以独特的方式使用{{outlet}}，并以独特的方式定义路线，但我很难搞清楚：*

Answer 1

您可以将路线定义为：

App.Router.map(function() {
  this.resource('posts', function() {

    this.route('index'); //this definition is optional

    this.resource('posts.post', {path: 'post/:post'});
    // or  this.route('post', {path: ':post'});

  });

});

然后，您必须在父帖子模板中定义 outlet ，在输入每个特定路线时，这些模板将填充帖子/索引和帖子/帖子模板。

  <script type="text/x-handlebars" data-template-name="posts">
     header posts
     <div class="container">
       <div class="col-sm-12 col-md-8 col-md-offset-2">
         {{outlet}}
       </div>
     </div>
  </script>


  <script type="text/x-handlebars" data-template-name="posts/index">
    {{#each post in controller}}
       {{#link-to 'posts.post' post }}{{post}}{{/link-to}}
    {{/each}}
  </script>


  <script type="text/x-handlebars" data-template-name="posts/post">
    Hi!!! {{model}}
  </script>

一个工作示例是here

Answer 2

由于您已经使用render帮助程序显示每篇博文，因此您将自动为每个创建的帖子设置一个控制器实例。那么我们要做的就是在其上定义一个布尔值，用它来控制显示的内容，然后设置一个动作来在点击标题时更改它，如下所示：

App.PostController = Ember.ObjectController.extend({
    showBody:false,
    actions:{
        toggleBody:function(){
            this.toggleProperty('showBody');
        }
    }
});

现在在post模板中，我们修改它以控制显示的内容，如下所示：

<script type="text/x-handlebars">
    {{#if showBody}}
        <h2 {{action 'toggleBody'}}>{{title}}</h2>
        <p>{{body}}</p>
    {{else}}
        <h2 {{action 'toggleBody'}}>{{title}}</h2>
    {{/if}}
</script>

单击时，使用show route替换索引路径的一部分

2 个答案: