JSFiddle - React, Tailwind, and code Playground

by wilkerlucio

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.1.min.js"></script>
<script type="text/x-handlebars" data-template-name="sample">
    {{App.obj.value}}
</script>
<script type="text/x-handlebars">
    <div>This value is nicely automatic updated: <div>{{App.obj.value}}</div></div>
    <br><br>
    <div>This on the custom view is not: <div>{{view App.CardView}}</div></div>
    <button type="button" onclick="App.obj.set('value', 'new value')">Update Value</button>
</script>

JavaScript

// This is my demo to demonstrate that problem that I'm having to create a view that renders another view
// My real thing that I'm trying to do is implement some kind of Card Layout, to them implement a Router
// over it, so, in order to accomplish what I need, I need a view that dynamically renders another view.
// My issue now is that view bindings on rendered view are not working... You can see it by running the
// example.
// This is a really simplified version to show the problem, if you wanna see more motivation about it
// you can check this other demo here: http://jsfiddle.net/wilkerlucio/Ztdpb/
window.App = Ember.Application.create();

App.obj = Ember.Object.create({value: "initial value"}); // simple object just to keep a simple data

App.CardView = Ember.View.extend({
    render: function(buffer) {
        // I'm probably doing something wrong here... I don't really need that to be on render function, but I found it
        // to be current best place for that, but the events of the rendered view are not working, it's not being updated
        // when the view bindings changes. I wonder what I'm missing.
        var view = Ember.View.create({templateName: "sample"});
        view.renderToBuffer(buffer);
    }
});