如何使用Ember.js中的复选框切换和绑定布尔值?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (43)

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")
)
提问于
用户回答回答于
<input type="checkbox"
  checked="{{if info.show_in_email 'checked'}}"
  onclick={{action (mut info.show_in_email)
  value="target.checked"}} />
用户回答回答于

我注意到2件事情:

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

你应该为其定义一个itemController PhotosControllerphotoApproved在其中定义:

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

)

当你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")
)

扫码关注云+社区

领取腾讯云代金券