Multiple Return Assistant EmberJS

Question

I have a custom view that I created in Ember. I really like the {{yield}} helper, which allows me to control the sandwich bread. However, what I would like to do now is to create a “two-story” sandwich and have an idea with more than 1 lesson in it, or at least be able to parameterize which template to use in the second lesson.

for example:

layout.hbs

 <div> <div class="header">Header Content</div> <div class="tab1"> Tab 1 Controls. <input type="text" id="common1" /> {{yield}} </div> <div class="tab2"> Tab 2 Controls. <input type="text" id="common2" /> {{yield second-template}} or {{template second-template}} </div> </div> 

app.js

 App.MyDoubleDeckerView = Ember.View.extend({ layoutName:"layout', templateName:"defaultTemplate", "second-template":"defaultSecond" }); App.MyExtendedDoubleDecker = App.MyDoubleDeckerView({ templateName:"myTemplate", "second-template":"mySecondTemplate" }); 

Is there a way to do something like this? What I like about the views in ember is the ability to centralize and expand the views that allow me to keep things that are common to all looks in one place ...

Answer 1

I think you should use named outputs for this.

http://emberjs.com/guides/routing/rendering-a-template/

Answer 2

Something like this should work:

layout.hbs

 <div> <div class="header">Header Content</div> <div class="tab1"> Tab 1 Controls. <input type="text" id="common1" /> {{yield}} </div> <div class="tab2"> Tab 2 Controls. <input type="text" id="common2" /> {{view "view.secondView"}} </div> </div> 

app.js

 App.MyDoubleDeckerView = Ember.View.extend({ layoutName:"layout', templateName:"defaultTemplate", secondView: Ember.view.extend({ templateName: "defaultSecond" }) }); App.MyExtendedDoubleDecker = App.MyDoubleDeckerView({ templateName:"myTemplate", secondView: Ember.view.extend({ templateName: "mySecondTemplate" }); }); 

In other words, call the view given view.secondView from your template. Then set the secondView property to your class or subclass.

You can add some syntactic sugar with

 App.viewForTemplateName = function(templateName) { return Ember.View.extend({ templateName: templateName }); }; 

Then, in your definitions above, do

 secondView: App.viewForTemplateName('mySecondTemplate')