Ember rc1 Connect Outlets (render)

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script type="text/x-handlebars" data-template-name="someApp">
    <h1>Some aPp top</h1>
    <a href="#/cheese">Cheese</a>
    <a href="#/wine">Wine</a>
    {{outlet }}
    <hr/>
    {{outlet wine}}
    ??????????????
    {{outlet grr}}
    
</script>
<script type="text/x-handlebars" data-template-name="cheese">
    <h2>Formage</h2>
</script>
<script type="text/x-handlebars" data-template-name="wine">
    <h2>Vin!</h2>
    <a {{action grr }}>grr</a>
    --mark--
    {{outlet grr}}
    /////////////////
</script>

JavaScript

//
window.SomeApp = Em.Application.create();
SomeApp.ApplicationController = Em.Controller.extend();
SomeApp.ApplicationView = Em.View.extend({ templateName:"someApp"})
SomeApp.Router.map(function(){
    
    this.route("index", { path: '/' });
    this.route("wine", { path:"*", outlet:"wine"})
    /*
    this.resource('cheese', {path:"cheese"}, function () {
        this.route('cheese', { path: '*:' });
    });

    this.resource('wine',{path:"wine"} , function () {
        this.route('wine', { path: '*:' })
        
        this.resource('cheese', {path:"*:"}, function () {
            this.route('cheese', { path: '*:' });
        });
    });
    */

});

SomeApp.IndexRoute = Em.Route.extend({
    events:{
        grr: function(){
            console.log("I captured grr");
            this.render('cheese', {into:"wine", outlet:'grr'})
        }
    },
    renderTemplate: function(){
        this.render('wine', {outlet:'wine'})
    }
});

SomeApp.CheeseRoute = Em.Route.extend({});
SomeApp.WineRoute = Em.Route.extend({
    renderTemplate:function(){
        
    }
});

SomeApp.Cheese = Em.Object.create({
    content:["Chese One", "Chese Two", "Chese Three"]
});
SomeApp.CheeseController = Em.Controller.extend({
    contentBinding: 'SomeApp.Cheese.content'
});
SomeApp.CheeseView = Em.View.extend({
    templateName:"cheese",
    didInsertElement:function(){
        console.log("Inserted Cheese!");
    }
})

SomeApp.Wine = Em.Object.create({
    content:["Wine One", "Wine Two", "Wine Three"]
});
SomeApp.WineController = Em.Controller.extend({
    contentBinding: 'SomeApp.Wine.content'
});
SomeApp.WineView = Em.View.extend({
    templateName:"wine",
    didInsertElement:function(){
        console.log("Inserted Wine!");
        //this.$().trigger('grr')
        this.get('controller').send('grr')
    }
})