ArrayProxy and SortableMixin = duplicates

by rlivsey

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/gist/2917574/9566c33408c8aa420e7893c779038d3a27543915/ember.js"></script>
<script type="text/x-handlebars" data-template-name="app">
    <h1>ArrayProxy & SortableMixin = duplicates</h1>
    
    <p>
      Loading normally works fine, loading with a proxy results in lots of duplicates.
    </p>
    <p>
      Switching pages does nothing but re-render the content, so the underlying content is fine.
    </p>
    
    {{outlet}}
    
    <button {{action goPage1}}>Page 1</button>
    <button {{action goPage2}}>Page 2</button>        
</script>

<script type="text/x-handlebars" data-template-name="things">
     {{view App.ThingsListView contentBinding="controller"}}
     <button {{action loadProxy}}>Load With Proxy</button>
     <button {{action loadContent}}>Load Normally</button>    
</script>

JavaScript

App = Ember.Application.create();
    
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
    templateName: "app" 
});

App.ThingsController = Ember.ArrayController.extend({
  sortProperties: ["name"]
})

App.ThingsView = Ember.View.extend({
    templateName: "things"
})

App.ThingsListView = Ember.CollectionView.extend({
    itemViewClass: Ember.View.extend({
      template: Ember.Handlebars.compile("{{view.content.name}}")
    })
});    
    
someThings = [
  Ember.Object.create({name: "Tom"}),
  Ember.Object.create({name: "Bob"}),
  Ember.Object.create({name: "Dave"}), 
  Ember.Object.create({name: "Fred"}),
  Ember.Object.create({name: "Alice"})
]
    
App.Router = Ember.Router.extend({
  enableLogging: true,
  root: Ember.Route.extend({
    home: Ember.Route.extend({
      route: '/',

      loadProxy: function(router){
          var proxy = Ember.ArrayProxy.create({content: []});
          router.get("thingsController").set("content", proxy);
          proxy.set("content", someThings);
      },
          
      loadContent: function(router){
          router.get("thingsController").set("content", someThings);
      },
      
      goPage1: Ember.Route.transitionTo("page1"),
      goPage2: Ember.Route.transitionTo("page2"),         
          
      // these are identical, just used to re-render view
          
      page1: Ember.Route.extend({
        route: "/",
        connectOutlets: function(router) {
          router.get("applicationController").connectOutlet("things");
        }  
      }),
            
      page2: Ember.Route.extend({
        route: "/2",
        connectOutlets: function(router) {
          router.get("applicationController").connectOutlet("things");
        }  
      })
    })
  })
})

App.initialize();