Can I dynamically append a component to the page?

21

You can get by calling,

this.get("controller").get('yourproperty');
this.get("controller").set('yourproperty', 'newvalue');
22

Not completely sure right now, but I think that to access the “another” controller, you need to include it with the “needs” directive in the declaration of the controller:

App.MyController = Em.ObjectController.extends
  needs: ["another"];
  actions:
  ...
  ...
23

Is there a way to call transitionTo or transitionToRoute in a view’s didInsertElement method? I searched in the official api about the Ember.View but didn’t find the transitionTo or the transitionToRoute methods defined in this class

24

You should be able to call this.get('controller').transitionTo() from inside a view.

25

Thank you guys! In my view’s didInsertElement, I tried transitionTo and the console said that this method is deprecated and then I used transitionToRoute method and it worked! This really saves a lot of trouble! Thanks for everyone again!

26

Is it possible to jump to another route in a component?

27 
I found an answer on SO: App.Router.route.transitionTo('index'). I wonder whether there would be any side-effect if I put this line of code in my project?
28

While I understand that this was helpful to the OP, this answer doesn’t actually answer the question and I was hoping for an answer to the original question.

How do you append a component to the view after a user action? For example, I have a button on my page that when clicked should add another component to the page. The user can click the add button as many times as they want, so I cannot hide an element on the page as an option.

If you have an answer for that, I’d much appreciate it.

29

Does this help?

Template:

<input type="text" value={{componentName}}>
{{button action=(action "addComponent componentName}}Add{{/button}}

{{#each componentNames as |componentName|}}
    {{component componentName}}
{{else}}
    No components added.
{{/each}}

Action in controller:

 actions: {
      addComponent(componentName) {
          this.get('componentNames').pushObject(componentName);
      }
 }