javascript - 如何过滤数据列表以呈现到 emberjs 中的多个导出中

Question

如何过滤数据列表以呈现到 emberjs 中的多个导出中。我现在所拥有的并没有真正发挥作用，但可以帮助您了解我想要实现的目标。

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

我想要实现的目标

我有一个文档页面，我想在其中列出文件列表中的所有文档(请参阅固定文件)。但我不想打印一个文件列表，而是想拆分列表，以便根据过滤器拥有多个列表。

请看代码以便更好地理解^^有人可以帮忙吗？ :)

文件.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
    });
}

});

info/documents.hbs

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

文件列表.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