Как вы можете отфильтровать список данных для рендеринга в несколько розеток в emberjs

Question

Как вы можете отфильтровать список данных для рендеринга в несколько розеток в emberjs. То, что у меня сейчас не работает, но может помочь вам понять, чего я хочу достичь.

Я могу решить эту проблему, создав несколько файлов-шаблонов file-list.hbs (где я меняю файл в файле fileList1 или fileList2, ...), но это не кажется правильным.

То, что я хочу достичь

У меня есть страница документы, где я хочу перечислить весь документ в списке файлов (см файл светильники). Но вместо того, чтобы распечатывать один список файлов, я хочу разбить списки, поэтому у меня есть несколько списков в соответствии с фильтром.

Пожалуйста, ознакомьтесь с кодом, чтобы понять его лучше ^^ Может ли кто-нибудь помочь? :)

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, где вы хотите использовать ее только один раз, просто включите {{partial "file-list"}} в свой showHomepage.hbs.

Тогда для вашего 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}} 

Какой будет вынести этот файл -list для каждого элемента массива модели.

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

ШАБЛОН:

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