javascript - Toggling and binding a boolean value with a checkbox in Ember.js - Stack Overflow

admin管理员组

文章数量:1399915

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?

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?

• javascript
• model-view-controller
• ember.js
• ember-data

Share Improve this question Follow asked Feb 25, 2014 at 0:03 gossetigosseti 9751717 silver badges4141 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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

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>

本文标签： javascriptToggling and binding a boolean value with a checkbox in EmberjsStack Overflow