Question

如何过滤数据列表以渲染到emberjs中的多个出口。我现在所做的并没有真正起作用，但可以帮助你理解我想要达到的目标。

我可以通过制作多个file-list.hbs模板文件来解决这个问题（我将每个文件中的文件更改为fileList1或fileList2，...），但这似乎不正确。

我想要实现的目标

我有一个文档页面，我想列出文件列表中的所有文档（参见fixtures文件）。但是我没有打印出一个文件列表，而是想拆分列表，这样我根据过滤器就有了多个列表。

请查看代码以更好地理解它^^ 有人可以帮忙吗？：）

File.FIXTURES

App.File.FIXTURES = [
{
    id: 1,
    showHomepage: false,
    filter: 'filter1',
    url: '/file1.pdf',
    description: 'file1'
},
{
    id: 2,
    showHomepage: false,
    filter: 'filter2',
    url: '/file2.pdf',
    description: 'file2'
},
{
    id: 3,
    showHomepage: true,
    filter: 'filter2',
    url: '/file3.pdf',
    description: 'file3'
},
{
    id: 4,
    showHomepage: true,
    filter: 'filter3',
    url: '/file4.pdf',
    description: 'file4'
}

];

路线

App.InfoDocumentenRoute = Ember.Route.extend({
model: function() {
    var store = this.store;
    return Ember.RSVP.hash({
        fileList1: store.find('file' , { filter: "filter1" }),
        fileList2: store.find('file' , { filter: "filter2" }),
        fileList3: store.find('file' , { filter: "filter3" })
    });
},
renderTemplate: function() {

    this.render('file-list', {          // the template to render
        into:'info.documenten',         // the route to render into
        outlet: 'file-list-filter1',    // the name of the outlet in the route's template
        controller: 'file'              // the controller to use for the template
    });

    this.render('file-list', {          // the template to render
        into:'info.documenten',         // the route to render into
        outlet: 'file-list-filter2',    // the name of the outlet in the route's template
        controller: 'file'              // the controller to use for the template
    });

    this.render('file-list', {          // the template to render
        into:'info.documenten',         // the route to render into
        outlet: 'file-list-filter3',    // the name of the outlet in the route's template
        controller: 'file'              // the controller to use for the template
    });
}

}）;

方式/ documents.hbs

{{ outlet file-list-filter1 }}
{{ outlet file-list-filter2 }}
{{ outlet file-list-filter3 }}

文件-list.hbs

<ul class="download-list">
{{#each file in file}}
<li class="download-list__item">
    <a {{bind-attr href=file.url}} target="_blank" class="download-list__link">
        <i class="icon-download download-list__link__icon"></i>
        {{file.description}}
    </a>
</li>
{{else}}
<li>
    Geen documenten beschikbaar.
</li>
{{/each}}

Answer 1

我认为最好的解决方法是将file-list.hbs声明为部分，并将其包含在您需要的其他模板中：{{partial "file-list"}}。在您只想一次使用它的showHomepage中，只需在showHomepage.hbs中包含{{partial "file-list"}}。

然后，对于您的InfoDocumentRoute，请将以下内容声明为模型列表数组：

App.InfoDocumentenRoute = Ember.Route.extend({
    model: function() {
        var store = this.store;
        return [ 
            store.find('file' , { filter: "filter1" }),
            store.find('file' , { filter: "filter2" }),
            store.find('file' , { filter: "filter3" })
        ];
    }
});

您的InfoDocument.hbs为：

{{#each file in model}}
    {{partial "file-list"}}
{{/each}}

然后，将为模型数组中的每个项目呈现文件列表模板。

More info about partials

Answer 2

因此，根据我收集的有关您的问题的内容，您希望在模型上的过滤器属性上过滤模型。我确信有几种方法可以实现这一目标，但这是另一种可能引发另一种解决方案的可能解决方案。

所以在路线上我退回了模特。然后在控制器中我创建了从路径中过滤模型数组的属性。然后在模板中，我遍历数组，filter属性在控制器中提供给我，并在模板中输出。

Heres JSBin。 http://emberjs.jsbin.com/vunugida/5/edit

App.IndexRoute = Ember.Route.extend({
  model: function() {
   return this.store.findAll('File');
}
});

App.IndexController = Ember.ArrayController.extend({
  filter1: function() {
    return this.filter(function(item) {
        return item.get('filter') === "filter1";
    });
  }.property(),

  filter2: function() {
  return this.filter(function(item) {
        return item.get('filter') === "filter2";
      });
  }.property(),

  filter3: function() { 
    return this.filter(function(item){
      return item.get('filter') === "filter3";
   });
  }.property()
  });

TEMPLATE：

<script type="text/x-handlebars" data-template-name="index">
  <h1>Index Template</h1>

  <ul>
    {{#each}}
      <li>{{url}}</li>
    {{/each}}
  </ul>

  <p>Filter 1</p>
    {{#each filter1}}
      <li>{{url}}</li>
    {{/each}}

  <p>Filter 2</p>
    {{#each filter2}}
      <li>{{url}}</li>
    {{/each}}

  <p>Filter 3</p>
    {{#each filter3}}
      <li>{{url}}</li>
    {{/each}}

  </script>

如何过滤数据列表以渲染到emberjs中的多个出口

2 个答案: