Programmatically adding Component into other Component lost all properties

I'm using ember-cli and want to create a modal container which will act like a stack of modals. Each modal is a component and they could interact to the previous/next one.

My code is like

modal-container

var ModalContainer = Ember.Component.extend({
  handler: {},
  handlerFunction: function () {
    var handler = this.get('handler');
    if (handler.action === 'push') {
      var instance = handler.component.create({
        content: handler.content
      });
      this.get('modal-container').pushObject(instance);
    } else {
      this.get('modal-container').popObject();
    }
  }.observes('handler'),
});

// template
{{view Ember.ContainerView viewName="modal-container"}}

And a dummy modal like this

var DummyModal = Ember.Component.extend({
    classNames: ['dummy-view-0'],
    content: 'dummy-view-0'
});

// template
<div>{{content}}</div>

If I use {{dummy-modal}} in template, I could see a div with dummy-view-0 content in it. But if I programmatically insert it via ModalContainer.handlerFunction, I could get the div element but neither my handler.content nor default dummy-view-0 will present in {{content}}.

What do I miss?

Also, I get using global lookup for Ember.ContainerView is deprecated. What is the corresponding string for this? On official website it only mention 'select'...