eccegordo/jsbin.OvONejo.html

## jsbin.OvONejo.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>

<script src=" http://builds.emberjs.com.s3.amazonaws.com/ember-data-0.13.js"></script>
 <title>Ember JS</title>
</head>
<body>

  <script type="text/x-handlebars">
  <div class="well well-lg">
    <h1>Application</h1>
    <h4>{{#linkTo "products"}} View Products {{/linkTo}}</h3>

    <div class="well well-sm">
      <span class="label label-info">OUTLET DEFINED IN APPLICATION TEMPLATE</span>
      {{outlet}}
    </div>
  </div>
  </script>

  <script type="text/x-handlebars" data-template-name="products">

        <div class="well well-sm alert alert-info">
         <ul>
          {{#each}}
            <li> {{#linkTo "product.index" id }} Product {{ id }}  {{name}} {{/linkTo}}  </li>
          {{/each}}
         </ul>

         <div class="well well-sm">
         <span class="label label-info">OUTLET DEFINED IN POSTS TEMPLATE</span>
         {{outlet}}
         </div>
      </div>

  </script>


  <script type="text/x-handlebars" data-template-name="product">

      <div class="well well-sm alert alert-success">
         <h2>{{ name }}</h2>
         Description: {{ description }}
         <br />
         Edit Form: {{ editform }}
         <br />
         <span class="label label-default">I WANT MY DYNAMIC TEMPLATE RENDERED HERE:</span>
         {{outlet "editform" }}

      </div>

  </script>


  <script type="text/x-handlebars" data-template-name="productform1">
    PRODUCT FORM 1
  </script>

  <script type="text/x-handlebars" data-template-name="productform2">
    PRODUCT FORM 2
  </script>

  <script type="text/x-handlebars" data-template-name="productform3">
    PRODUCT FORM 3
  </script>


</body>
</html>

## jsbin.OvONejo.js
App = Ember.Application.create({});

App.Router.map(function() {
    this.resource("products", { path: "products" }, function(){
      this.resource("product", { path: ":product_id" }, function(){
        this.route("edit");
      });
    });
});


App.ProductsRoute = Ember.Route.extend({
  model: function() {
    return App.Product.find();
  }
});


App.ProductRoute = Ember.Route.extend({
  model: function(params) {
    return App.Product.find(params.product_id);
  },
  setupController: function(controller, model){
    var templateEditForm = model.get('editform');
    var templateInto = 'product';
    var templateOutlet = 'editform';

    console.log("render the [%s] form into the [%s] template, using the [%s] outlet",templateEditForm, templateInto, templateOutlet);

    // Why does this code not work

    var self = this;
    Ember.run.later(function(){
    self.render(templateEditForm, {   // the template to render
      into: 'product',                // the template to render into
      outlet: templateOutlet,              // the name of the outlet in that template
      controller: controller        // the controller to use for the template
    });
    },1);
  }
 /*
  renderTemplate: function(controller, model) {
    var templateEditForm = model.get('editform');
    var templateInto = 'product';
    var templateOutlet = 'editform';

    console.log("render the [%s] form into the [%s] template, using the [%s] outlet",templateEditForm, templateInto, templateOutlet);

    // Why does this code not work

    this.render(templateEditForm, {   // the template to render
      into: 'product',                // the template to render into
      outlet: 'editform',              // the name of the outlet in that template
      controller: controller        // the controller to use for the template
    });

  }
*/

});

App.ProductEditRoute = Ember.Route.extend({

});


// Controllers

App.ProductsController = Ember.ArrayController.extend({
});

App.ProductsProductController = Ember.ObjectController.extend({
});

App.ProductsProductEditController = Ember.ObjectController.extend({

});


// Models
App.Product = DS.Model.extend({
    name: DS.attr('string'),
    editform: DS.attr('string'),
    description: DS.attr('string')
});


// Data store
App.Store = DS.Store.extend({
  revision: 13,
  adapter: DS.FixtureAdapter.create()
});

App.Product.FIXTURES = [
    {
        id: 1,
        name: "Product #1",
        editform: "productform1",
        description: "This is a description of product"
    },
    {
        id: 2,
        name: "Product #2",
        editform: "productform2",
        description: "This is a description of product"
    },
    {
        id: 3,
        name: "Product #3",
        editform: "productform3",
        description: "This is a description of product"
    }
];
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
	<script src="http://builds.emberjs.com/ember-latest.js"></script>

	<script src=" http://builds.emberjs.com.s3.amazonaws.com/ember-data-0.13.js"></script>
	<title>Ember JS</title>
	</head>
	<body>

	<script type="text/x-handlebars">
	<div class="well well-lg">
	<h1>Application</h1>
	<h4>{{#linkTo "products"}} View Products {{/linkTo}}</h3>

	<div class="well well-sm">
	<span class="label label-info">OUTLET DEFINED IN APPLICATION TEMPLATE</span>
	{{outlet}}
	</div>
	</div>
	</script>

	<script type="text/x-handlebars" data-template-name="products">

	<div class="well well-sm alert alert-info">
	<ul>
	{{#each}}
	<li> {{#linkTo "product.index" id }} Product {{ id }} {{name}} {{/linkTo}} </li>
	{{/each}}
	</ul>

	<div class="well well-sm">
	<span class="label label-info">OUTLET DEFINED IN POSTS TEMPLATE</span>
	{{outlet}}
	</div>
	</div>

	</script>



	<script type="text/x-handlebars" data-template-name="product">

	<div class="well well-sm alert alert-success">
	<h2>{{ name }}</h2>
	Description: {{ description }}
	<br />
	Edit Form: {{ editform }}
	<br />
	<span class="label label-default">I WANT MY DYNAMIC TEMPLATE RENDERED HERE:</span>
	{{outlet "editform" }}

	</div>

	</script>


	<script type="text/x-handlebars" data-template-name="productform1">
	PRODUCT FORM 1
	</script>

	<script type="text/x-handlebars" data-template-name="productform2">
	PRODUCT FORM 2
	</script>

	<script type="text/x-handlebars" data-template-name="productform3">
	PRODUCT FORM 3
	</script>


	</body>
	</html>
	App = Ember.Application.create({});

	App.Router.map(function() {
	this.resource("products", { path: "products" }, function(){
	this.resource("product", { path: ":product_id" }, function(){
	this.route("edit");
	});
	});
	});


	App.ProductsRoute = Ember.Route.extend({
	model: function() {
	return App.Product.find();
	}
	});


	App.ProductRoute = Ember.Route.extend({
	model: function(params) {
	return App.Product.find(params.product_id);
	},
	setupController: function(controller, model){
	var templateEditForm = model.get('editform');
	var templateInto = 'product';
	var templateOutlet = 'editform';

	console.log("render the [%s] form into the [%s] template, using the [%s] outlet",templateEditForm, templateInto, templateOutlet);

	// Why does this code not work

	var self = this;
	Ember.run.later(function(){
	self.render(templateEditForm, { // the template to render
	into: 'product', // the template to render into
	outlet: templateOutlet, // the name of the outlet in that template
	controller: controller // the controller to use for the template
	});
	},1);
	}
	/*
	renderTemplate: function(controller, model) {
	var templateEditForm = model.get('editform');
	var templateInto = 'product';
	var templateOutlet = 'editform';

	console.log("render the [%s] form into the [%s] template, using the [%s] outlet",templateEditForm, templateInto, templateOutlet);

	// Why does this code not work

	this.render(templateEditForm, { // the template to render
	into: 'product', // the template to render into
	outlet: 'editform', // the name of the outlet in that template
	controller: controller // the controller to use for the template
	});

	}
	*/

	});

	App.ProductEditRoute = Ember.Route.extend({

	});



	// Controllers

	App.ProductsController = Ember.ArrayController.extend({
	});

	App.ProductsProductController = Ember.ObjectController.extend({
	});

	App.ProductsProductEditController = Ember.ObjectController.extend({

	});


	// Models
	App.Product = DS.Model.extend({
	name: DS.attr('string'),
	editform: DS.attr('string'),
	description: DS.attr('string')
	});


	// Data store
	App.Store = DS.Store.extend({
	revision: 13,
	adapter: DS.FixtureAdapter.create()
	});

	App.Product.FIXTURES = [
	{
	id: 1,
	name: "Product #1",
	editform: "productform1",
	description: "This is a description of product"
	},
	{
	id: 2,
	name: "Product #2",
	editform: "productform2",
	description: "This is a description of product"
	},
	{
	id: 3,
	name: "Product #3",
	editform: "productform3",
	description: "This is a description of product"
	}
	];