在 Ember.js 中使用复选框切换和绑定布尔值答案

【问题标题】：Toggling and binding a boolean value with a checkbox in Ember.js在 Ember.js 中使用复选框切换和绑定布尔值
【发布时间】：2014-02-25 00:03:02
【问题描述】：

我正在尝试使用绑定复选框 (photoApproved) 在 true 和 false 值之间切换，但我的控制器代码没有那么幸运。

这是photos_controller.js：

App.PhotosController = Ember.ArrayController.extend(

  photoApproved: ((key, value) ->
    model = @get("model")
    if value is 'undefined'
      model.get "approved"
    else
      model.set "approved", value
      model.save()
      value
  ).property("model.approved")

)

这是template 文件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}}

最后，这是model：

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

我应该如何更改我的 photoApproved 功能才能正常工作？

【问题讨论】：

标签： javascript model-view-controller ember.js ember-data

【解决方案1】：

Ember 2.4 答案：

<input type="checkbox"
  checked="{{if info.show_in_email 'checked'}}"
  onclick={{action (mut info.show_in_email)
  value="target.checked"}} />

info 是一个 ember 模型，show_in_email 是一个布尔字段。

【讨论】：

【解决方案2】：

我注意到两件事：

photoApproved 是集合的属性，而不是单个模型的属性。

您应该为 PhotosController 定义一个 itemController 并在其中定义 photoApproved：

App.PhotosController = Ember.ArrayController.extend(
  itemController: 'photo'
)

App.PhotoController = Ember.ObjectController.extend(

  photoApproved: ((key, value) ->
    model = @get("model")
    if value is 'undefined'
      model.get "approved"
    else
      model.set "approved", value
      model.save()
      value
  ).property("model.approved")

)

接下来，我完全不明白你为什么需要定义photoApproved。当您使用approved 作为复选框上的选中值时，它已经绑定到模型。然后你可以定义一个观察者来保存模型（但我不确定下面的控制器代码是否正确）。

<li class="masonry-brick">
  <h3>Approved: {{approved}}</h3>
  {{input type="checkbox" checked=approved class="toggle"}}
  {{#link-to "photo" this}}{{name}}{{/link-to}}
  <img {{bind-attr src=image_url}} alt="Logo">
</li>

App.PhotoController = Ember.ObjectController.extend(
  approvePhoto: (->
    @get('model').save() unless @get('approved')
  ).observes("approved")
)

【讨论】：

啊，这看起来是一个更优雅的解决方案。唯一的问题是原始批准的值在加载时没有约束力——默认情况下它们都是假的。此外，当单击复选框时，PUT 请求仅在设置为 true 时触发。我需要在两者上都设置它。
啊，解决了：只需删除 unless @get('approved') 就可以了。下文将一一解答。
很好的答案。谢谢一百万！

【解决方案3】：

通过删除approvePhoto函数上的unless @get('approved')解决。

# controller
App.PhotoController = Ember.ObjectController.extend(

  approvePhoto: ((key, value) ->
    @get('model').save()
  ).observes("model.approved")

)

# template
<li class="masonry-brick">
  <h3>Approved: {{approved}}</h3>
  {{input type="checkbox" checked=approved class="toggle"}}
  {{#link-to "photo" this}}{{name}}{{/link-to}}
  <img {{bind-attr src=image_url}} alt="Logo">
</li>

【讨论】：

酷。你甚至可以从观察方法中删除model.。