CODEWITHSUNDEEP
javascriptember.js
Aaron Scruggs
Aaron Scruggs

Reputation: 712

How to affect state of ObjectController from its ArrayController in ember.js

I am still trying to understand how to properly structure an ember.js application. So, this may be a systemic issue with the way I am trying to solve this. That being said, I am going to try asking the same question a couple different ways ...

In the code example below, when a record is created, how can I get it to be added to the list with the isEditing property set to true?

Can I access to a specific object controller from its array controller?

Each task has a view state and an edit state. When a new task is created, how can I have it initially appear in the edit state?

App.TasksController =  Ember.ArrayController.extend({
  actions: {
    createTask: function(){
      var task = this.store.createRecord('task');
      task.save();
    }
  }
});

App.TaskController = Ember.ObjectController.extend({
  isEditing: false,

  actions: {
    toggleEditing: function(task) {
      if(this.isEditing){
        task.save();
      }
      this.set('isEditing', ! this.isEditing ); 
    }
  } 
});


<script type="text/x-handlebars" data-template-name="tasks">
  <ul>
    {{#each task in controller}}
      {{render "task" task}}
    {{/each}}
    <li {{action "createTask"}} >
     New Task
    </li>
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="task">
  <li {{action "toggleEditing" task on="doubleClick"}} >
    {{#if isEditing }}
      {{textarea value=title cols="80" rows="6"}}
    {{else}}
      {{title}}
    {{/if}} 
  </li>
</script>

Upvotes: 0

Views: 103

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

Set the property on the model.

You don't have to define the property as an attr on the model (which means it won't send it up to the server on save etc), but you can set the property on the model.

Or you can do it based on the currentState of the model. (click go to orders, then add orders)

http://emberjs.jsbin.com/AvOYIwE/4/edit

App.OrderController = Em.ObjectController.extend({
  _editing: false,
  editing: function(){
    return this.get('_editing') || (this.get('model.currentState.stateName') == 'root.loaded.created.uncommitted');
  }.property('model.currentState.stateName', '_editing'),
  actions: {
      stopEditing: function(){
        // blow away the computed property and just set it to true
        this.set('editing', false);
      },
      startEditing: function(){
        this.set('editing', true);
      },
    }
});

Upvotes: 1

Related Questions