Question

The main idea: after my controller did update properties on a model successfully I want to call a view method which closes the childview.

Template:

<a {{action showUpdate href=true target="view"}}>update</a>

   {{#if view.isUpdate}}   
        {{#view App.UpdateView}}   
            ...here is a form
            <button {{action update}}>Send</button>
        {{/view}}   
    {{/if}}

View:

App.MainView = Ember.View.extend({
  templateName: 'update',
    isUpdate: false,
    showUpdate: function() {
        this.set('isUpdate', !this.get('isUpdate'));
    }
});

App.UpdateView= Ember.View.extend();

Controller:

App.MainController = Ember.Controller.extend({
   updateCon: function() {
               do something
   },
       ...

Router:

 update: function(router, evt) {
    router.get('mainController').updateCon();
    //router.get('mainController.view').showUpdate(); <-- doesnt work
 }

So I tried to call this in my router after my Controller did well, but it doesnt work.

Cannot call method 'showUpdate' of null 

Is that the right approach? When yes: what am I missing? When no: How to deform my view when my controller did something?

Answer 1

The control flow logic is better suited for the Controller. It is generally a good idea to keep views free of state and the controller shouldn’t know about the View. You can move the update flag and function to your controller and target the controller in your Handlebars template. The view’s Handlebars template would be something like:

<a href="#" {{action showUpdate target="controller"}}>update</a>
{{#if isUpdated}}
    ...
{{/if}}

Then the controller would have the update logic:

App.MainController = Em.Controller.extend({
    isUpdated: false,
    showUpdate: function() {
        this.set('isUpdated', !this.get('isUpdated'));
    }
});

The view is now nothing but the template name:

App.MainView = Em.View.extend({
    templateName: 'update'
});