Ember.js v0.9.7

by rlivsey

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.7.js"></script>
<p>
    See the <a href="https://github.com/emberjs/ember.js/pull/764">pull request</a> for discussion.
</p>

<p>
    Three issues here:
</p>

<ol>
    <li>unshiftObjects inserts in reverse order</li>
    <li>contentIndex incorrectly set with unshiftObject(s)</li>
    <li>unshiftObjects triggers arrayDidChange once per item (not demonstrated here)</li>
</ol>

<script type="text/x-handlebars" data-template-name="thing">
    contentIndex: {{contentIndex}}, name: {{content.name}}
</script>

<script type="text/x-handlebars">
    {{view App.ThingsView}}
    
    <p>
        <button {{action prepend target="App.things"}}>Prepend some things</button>
        <button {{action append target="App.things"}}>Append some things</button>
    </p>
</script>

CSS

p, ol, ul {
    margin-bottom: 1em;
}

ol, ul {
    margin-left: 2em;   
}

ol {
    list-style-type: decimal;
}
ul {
    list-style-type: disc;   
}

JavaScript

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

var i = 0;

App.things = Ember.ArrayController.create({
   
    content: [
        Ember.Object.create({name: "item " + ++i}),
        Ember.Object.create({name: "item " + ++i})
    ],

    prepend: function() {
        this.get("content").unshiftObjects([
            Ember.Object.create({name: "item " + ++i}),
            Ember.Object.create({name: "item " + ++i}),            
        ]);
    },
        
    append: function() {
        this.get("content").pushObjects([
            Ember.Object.create({name: "item " + ++i}),
            Ember.Object.create({name: "item " + ++i}),            
        ]);
    }
        
});

App.ThingView = Ember.View.extend({
    templateName: "thing"
});

App.ThingsView = Ember.CollectionView.extend({
    tagName: "ul",
    itemViewClass: 'App.ThingView',
    content: App.things
});