CODEWITHSUNDEEP
ember.js
Daniel Rosewarne
Daniel Rosewarne

Reputation: 71

Why are our nested actions not working correctly in Ember?

We're building an Ember app and using lots of nested views and so far all is working out, except for one issue. When we try and implement actions within one of the nested views, things go wrong.

The views in question are:

App.TodoView = Ember.View.extend({
  templateName: 'app/templates/todo' 
});

App.Todo_entriesView = Ember.View.extend({
  templateName: 'app/templates/todo_entries'
});

App.Todo_entryView = Ember.View.extend({
  templateName: 'app/templates/todo_entry',
});

The templates are:

/templates/todo.hbs

<article>
  <h1>{{title}}</h1>  
  {{outlet}}
</article>

/templates/todo_entries.hbs

{{#if isLoading}}
  <p>Loading...</p>
{{else}}
  <ul class="list">
    {{collection contentBinding="content" itemViewClass="App.Todo_entryView"}}
  </ul>
{{/if}}

/templates/todo_entry.hbs

<li>
{{#if isLoading}}
  Loading...
{{else}}
  {{view.content.id}}) {{view.content.title}}
  <a {{action deleteRecord href="true" target="controller"}}>Delete</a>
{{/if}}
</li>

And the controllers are:

App.TodoController = Ember.ObjectController.extend({
  deleteRecord: function() {
    this.get('content').deleteRecord();
    this.transaction.commit();
    App.router.transitionTo('todo');
  }
});

App.Todo_entriesController = Ember.ArrayController.extend();

App.Todo_entryController = Ember.ObjectController.extend({
  deleteRecord: function() {
    this.get('content').deleteRecord();
    this.transaction.commit();
    App.router.transitionTo('todo');
  }
});

When the delete button is clicked, we get an error that the deleteRecord method doesn't exist on Todo_entriesController (i.e. the view's parent) and not on Todo_entryController as we'd expect.

Does anybody know how we can get the deleteRecord action in the Todo_entry template to correctly call the Todo_entryController deleteRecord method? Or is there a better way to be doing this altogether?

Thanks, Dan

Upvotes: 1

Views: 476

Answers (1)

sly7_7
sly7_7

Reputation: 12011

As the App.Todo_entryView is created without using connectOutlet, it is not automatically bound to the App.Todo_entryController, but uses its parentView controller.

Perhaps the workaround could be to overide the init method of the App.Todo_entryView and instantiate the controller manually. Something like:

App.Todo_entryView = Ember.View.extend({
  templateName: 'app/templates/todo_entry',
  init: function(){
    this._super();
    this.set(
      'controller',
      App.Todo_entryController.create({ content: this.get('content') })
    );
  }
});

Upvotes: 1

Related Questions