Can't swap currentView of Ember.ContainerView in a #each

问题

I'm trying to use the the currentView feature of an Ember.ContainerView in the context of a #each helper but it fails when currentView property is changed to another view.

My aim here is to allow editing an item of a list, by changing the regular view to an edit view when the user click a link.

Main template:

  <ul>
  {{#each itemController="person"}}
      <li>{{view Ember.ContainerView currentViewBinding="cv"}}</li>
  {{/each}}
   </ul>

Template 'name' used to display a person :

    {{firstName}}  {{lastName}} <a {{action edit}}>edit</a>

Controller for the currentViewBinding property ('cv') and handling for the edit action.

App.PersonController = Ember.ObjectController.extend({
    cv: Ember.View.extend({
        templateName: 'name'
    }),   
    edit: function() {
        this.set('cv', Ember.View.extend({
            templateName: 'nameEdit'
        }));
    }
})

'nameEdit' template corresponding to the view that needs to be displayed to edit the person object.

    {{input type='text' value=firstName}} {{input type='text' value=lastName}}

The api guide says that:

When the currentView property is set to a view instance, it will be added to the ContainerView. If the currentView property is later changed to a different view, the new view will replace the old view.

But it's worse if I replace the cv property with a view instance (by using create() instead of extend()) as a re-render error is yield. See this question of mine.

Here is the jsFiddle to play with http://jsfiddle.net/fblanvil/tD3Ph/3/

回答1:

I ended up not using ContainerView at all and using a simple if. But it doesn't explain why it's not possible to use a ContainerView this way in an #each helper. If someone thinks it's worth a Jira, put a comment and I'll do it.

  <ul>
  {{#each itemController="person"}}
      <li>
      {{#if editing}}
          {{view templateName='nameEdit'}}
      {{else}}
          {{view templateName='name'}}
      {{/if}}
      </li>
  {{/each}}
   </ul>

Simple and effective after all...

App.PersonController = Ember.ObjectController.extend({
    editing: false,
    edit: function() {
        this.set('editing', true);
    }
})

来源：https://stackoverflow.com/questions/17515873/cant-swap-currentview-of-ember-containerview-in-a-each

标签

ember.js