Question

我目前正在Ember.js上建立照片审批应用。模型中的照片默认为approved = true。在应用程序中，单击照片可切换此状态，因此可以将其快速列入黑名单。

我想设置一些过滤并展示approved = true，approved = false和all照片的路线。

我的router.js：

App.Router.map ->
  @resource "photos", ->
    @resource "photo",
      path: ":photo_id"
    # additional child routes
    @route "approved"
    @route "disapproved"\

我的photo.js型号：

App.Photo = DS.Model.extend(
  name: DS.attr("string")
  description: DS.attr("string")
  image_url: DS.attr("string")
  approved: DS.attr("boolean")
)

问题代码位于photos_route.js：

中

App.PhotosRoute = Ember.Route.extend(
  model: ->
    App.Photo.find()
)

App.PhotosApprovedRoute = Ember.Route.extend(
  model: ->
    @store.filter "photo", (photo) ->
      photo.get("approved")

  renderTemplate: (controller) ->
    @render "photos",
      controller: controller
)

App.PhotosDisapprovedRoute = Ember.Route.extend(
  model: ->
    @store.filter "photo", (photo) ->
      not photo.get("approved")
  renderTemplate: (controller) ->
    @render "photos",
      controller: controller
)

最后，这是我在templates：

中展示的方式

{{!-- application.hbs --}}
<header id="header">
  <h2>{{#link-to "index"}}Home{{/link-to}}</h2>

  <nav>
    <ul>
      <li>{{#link-to "photos"}}All photos{{/link-to}}</li>
      <li>{{#link-to "photos.approved"}}Approved{{/link-to}}</li>
      <li>{{#link-to "photos.disapproved"}}Disapproved{{/link-to}}</li>
    </ul>
  </nav>
</header>

<div id="content">
  {{outlet}}
</div>

{{!-- photos.hbs --}}
<h1>Photos</h1>
<ul>
  {{#each controller}}
    <li class="masonry-brick">
      <h3>Approved: {{approved}}</h3>
      {{input type="checkbox" checked=photoApproved class="toggle"}}
      {{#link-to "photo" this}}{{name}}{{/link-to}}
      <img {{bind-attr src=image_url}} alt="Logo">
    </li>
  {{else}}
    <li>There are no photos.</li>
  {{/each}}
</ul>

{{outlet}}

如何重新调整photos_routes.js以获得所需的行为？

Answer 1

Store上的filter function有两个参数，一个查询，由适配器用于过滤服务器端，以及一个函数，用于为新的或修改过的对象保留过滤器（更新内存中的内容）。您正在使用的函数签名看起来更像是您用于Array的函数签名。

查看文档： http://emberjs.com/api/data/classes/DS.Store.html#method_filter

未经测试的路线版本：

App.PhotosApprovedRoute = Ember.Route.extend(
  model: ->
    @store.filter "photo", {approved: true}, (photo) ->
      photo.get("approved")
)

App.PhotosDisapprovedRoute = Ember.Route.extend(
  model: ->
    @store.filter "photo", {approved: false}, (photo) ->
      not photo.get("approved")
)

PS。这对我来说似乎有点多余。我认为第三个参数（谓词）可以通过查询来推断......但这就是我根据文档理解现在的情况。

基于布尔值过滤模板中的Ember.js数据

1 个答案: