When it comes to rendering views in ember with relevant context, there are various approaches available. Here are four methods that you can consider:
1. If the view needs to be placed outside of a handlebars template, you can utilize jQuery to position the rendered content wherever necessary.
(since the replacement of the view element occurs after didInsertElement, additional styles may be needed to hide the element initially eg display:none , and show it once repositioned)
Example
2. Use the {{render}} helper to render the view directly within another template if required. This helper offers flexibility for different context requirements ().
Example
3. Utilize the {{outlet}} helper to render the view based on the specified content within the visited route. ()
Example
4. Programmatically push a view using a ContainerView to place it dynamically wherever needed.
Example
UPDATE for approach 4: For versions equal to or greater than 1.8.x, to prevent the error mentioned in , specify a property associated with the ContainerView as illustrated in the example below
related code
approach 1
hbs
<script type="text/x-handlebars">
<h2> Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
This is index<br/>
{{view App.TestView}}
</script>
<script type="text/x-handlebars" data-template-name="test">
This is the test view<br/>
<b>{{myProp}}</b>
</script>
<div id="a-div" style="background-color:lightgray">
This is a div somewhere,<br/>
</div>
js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexController = Ember.Controller.extend({
myProp:"index controller prop"
});
App.IndexView = Ember.View.extend({
placeTestViewSomewhere:function(){
var theTestView = this.$(".my-test-view").detach();
$("#a-div").append(theTestView);
}.on("didInsertElement")
});
...
approach 2
UPDATE for approach 4: