jeudi 8 janvier 2015

Is there a way to fill in "yield" section programatically within a view/component

I have built a fairly simple toaster component which is basically a container for a message(mostly message but it could also be anything) that dies out after certain time period. In works like this :



{{#toaster-message selfDestructIn=2000}} this will discinerate with fancy effect {{/toaster-message}}


the component's hbs looks like this:



<div class="toaster">{{yield}}</div>


The catch is I want to programatically inject this component via some action. So the only way I know to do this properly is by using a container view and appending the component in it. This is also fairly simple, all I have to do in my container view is:



//within my container view
appendToaster: function(message){//message is what I want to render in yield section
var toasterComponent = App.ToasterComponent.create();
this.pushObject(toasterComponent);
}


Now the confusion: how do I inject this message in the yield section when I am doing things the way I am!! I know I could have just set message property in the component itself and used it instead, which works for most of the use cases, but I really wanted this component to work for anything (like another view).


Your help or alternative approaches or any ideas will be highly appreciated.


Thanks, Dee





Aucun commentaire:

Enregistrer un commentaire