I want to append a component to my page after I clicked the button, how could this be done?


#1

In my previous post, many developers helped me a lot with Ember’s basic knowledge. Thanks go to these guys again:) But here, I still wonder how to append a component into the page. I know that I could write my component in the template and then use a boolean value to controll its display or not, but in this way, there is no animation effect when the component is showing or hiding. So hereby I want to know whether there is a way to append a component to the page? Thanks for your help!


#2

@hwoarangzk To give an animation effect to your Ember Component when showing in your DOM, use the didInsertElement function.

App.TempYourComponent = Ember.Component.extend({
didInsertElement: function(){
    this.$('#youdivid').show("slide", { direction: "left" }, 100);
}
});

You can use jQuery animation methods in didInsertElement function to animate your Component when inserting into your DOM.


#3

Thank you so much! I’ll take a try!


#4

Once again, this answer doesn’t answer the OPs question. How do you append a component to a page after user action?