JSFiddle - React, Tailwind, and code Playground

by rharper

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.4.js"></script>
<script type="text/x-handlebars">
    <p>Thing Count: {{App.controller.things.length}}</p>
    <p>SubThing Count: {{App.controller.allSubThings.length}}</p>
    <br />
    <h3>Thing Enumeration</h3>
    <ul>
    {{#each App.controller.things}}
        <li>Count: {{this.subthings.length}}</li>
    {{/each}}
    </ul>
</script>

JavaScript

App = Em.Application.create({});

App.controller = Em.Object.create({
    things: [
        Em.Object.create({subthings:[]}),
        Em.Object.create({subthings:[]}),
        Em.Object.create({subthings:[]})        
    ],
    
    allSubThings : function() {
        var things = this.get('things');
        var results = [];
        things.forEach( function(thing)  {
            results.pushObjects( thing.get('subthings') );
        });
        return results;
    }.property('[email protected]').cacheable()       
});


setTimeout(function() {
    var things = App.controller.get('things');
    // This works:
    things.objectAt(0).set('subthings',[1,2,3]);
}, 1000);

setTimeout(function() {
    var things = App.controller.get('things');
    // This does not:
    things.objectAt(1).get('subthings').pushObjects([1,2,3]);
}, 2000);