Toggling and binding a boolean value with a checkbox in Ember.js

Question

I’m trying to toggle between a true and false value with a bound checkbox (photoApproved), but having no so luck in my controller code.

Here’s the 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")

)

Here’s the template file 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}}

And finally, here’s the model:

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

How should I change my photoApproved function to get things working properly?

Rimian · Accepted Answer · 2018-05-28 05:20:01Z

3

Ember 2.4 answer:

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

where info is a ember model and show_in_email is a boolean field.

edited May 28, 2018 at 5:20

Rimian

38.7k17 gold badges128 silver badges119 bronze badges

answered Mar 18, 2016 at 13:34

Ben

13.7k4 gold badges51 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bazzel · Accepted Answer · 2014-02-25 06:38:56Z

3

I notice 2 things:

photoApproved is a property of the collection, not of an individual model.

You should define an itemController for the PhotosController and define photoApproved in there:

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

)

Next, I don't see why you need to define photoApproved at all. When you use approved as checked value on the checkbox, it's already bound to the model. You can then define an observer for saving the model (but I'm not sure if the following controller code is correct).

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

answered Feb 25, 2014 at 6:38

bazzel

8437 silver badges22 bronze badges

2 Comments

gosseti Over a year ago

Ah this looks like a much more elegant solution. Only problem is that the original approved value isn’t binding on load — they’re all false by default. Also, when the checkbox is clicked, the PUT request in only fired on setting true. I need it to set on both.

gosseti Over a year ago

Ah, solved: just removing the unless @get('approved') did the trick. Going to answer it in below.

gosseti · Accepted Answer · 2014-02-26 19:56:24Z

0

Solved by removing the unless @get('approved') on the approvePhoto function.

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

answered Feb 26, 2014 at 19:56

gosseti

97517 silver badges41 bronze badges

1 Comment

bazzel Over a year ago

Cool. You can even remove model. from the observe method.

Collectives™ on Stack Overflow

Toggling and binding a boolean value with a checkbox in Ember.js

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related