How do I click to edit on a collection and update that specific element?

1

I was following the tutorial but the tutorial is for the object controller. In an Array controller how do I properly pass in the object for the text field so it triggers the update for that model object?

Right now I can double click, and then type in some value, and if I hit enter I get the value plus undefined method set.

Uncaught TypeError: Object asdasdasdasdasd has no method 'set'

I guess it’s passing the raw value into the controller and then trying to run methods off of that. How do I get it to pass the actual model?

View:

<ul>
  {{#each}}
    <li {{bind-attr class="isEditing:editing"}} {{action "editWorkout" this on="doubleClick"}}>
      {{#if isEditing}}
        {{view Ember.TextField class='edit' action="updateWorkout"}}
      {{else}}
        {{#link-to 'workout' this}} {{title}} {{/link-to}}
      {{/if}}
    </li>
  {{/each}}
  <li>
    {{newWorkoutName}}
  </li>
</ul>

Controller:

EmberWorkouts.WorkoutsController = Ember.ArrayController.extend

  actions:
    editWorkout: (workout) ->
      workout.set('isEditing', true)

    createWorkout: ->
      title = @get('newWorkoutName')

      workout = @store.createRecord('workout', title: title)
      @set('newWorkoutName', '')
      workout.save()

    updateWorkout: (workout) ->
      workout.set('isEditing', false)
      workout.save()

  isEditing: false

Repo here if you want to investigate: https://github.com/ecl1pse/ember-workouts/tree/master/app

2

First I’m not sure how this works because ‘isEditing’ is a controller property and in ArrayController you should write {{controller.isEditing}} as opposed to the ObjectController which acts like a proxy for the model.

Second thing: I don’t know if in purpose you would like to lazily perform the updates, but if you want to use standard bindings you can achieve that by binding the value of each TextField view to the iterated item’s property, here’s an example:

–

Visit Bootstrap for Ember: GitHub - ember-addons/bootstrap-for-ember: Bootstrap for Ember.js

Asaf.