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

Posted 2023-02-22

【中文标题】基于布尔值过滤模板中的 Ember.js 数据

【英文标题】：Filtering Ember.js data in template based on boolean

【发布时间】：2014-03-26 22:13:12

【问题描述】：

我目前正在 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" thisname/link-to
      <img bind-attr src=image_url >
    </li>
  else
    <li>There are no photos.</li>
  /each
</ul>

outlet

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

【参考方案1】：

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

查看文档： 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。这对我来说似乎有点多余。我认为第三个参数（谓词）可以通过查询推断出来......但这就是我根据文档理解它现在的方式。

【讨论】：

太好了，谢谢。除了 API 请求之外，这一切都有效：http://localhost:3000/api/hotos?approved=true — 它似乎从photos 中删除了p，但在我的任何代码中都没有'hotos' 的踪迹。将路线设为photos?disapproved 而不是photos/disapproved 会更好吗？

我会选择photos/disapporved，但我想这更多的是个人品味/偏好，每个团队都有不同的指导方针。这两种方式都不是很大。一般来说，我会使用查询字符串来过滤相同的内容。但是，如果用户将其视为单独的内容，则不同的 URL 是有意义的，我认为这里就是这种情况。

好像还有问题；我在控制台中收到了TypeError: Object Photo has no method 'eachRelatedType'。

好像是一个单独的问题，你能再发一个问题或者给我更多的细节吗？

当然，这是新问题：***.com/questions/22051678/…