Collection sort order in IE?

[stefl]

I have an app using Ember Resource (thanks!) and it displays a set of "Spaces" that have many "Conversations" that have many "Thoughts".

If I view a collection of Thoughts in Webkit they all appear in order of creation (and the order they appear in the JSON). In IE8 however they appear out of order - seemingly at random.

Is this an Ember bug or something I am doing wrong with Ember Resource?

Is there perhaps some way of specifying a sort order on the loaded "content" of a controller and how it is displayed in a collection of views?

[staugaard]

Sounds strange. I have not encountered this. Can you provide some code that shows the problem?

[stefl]

I'm trying to extract the part that isn't working.

You can see the effect here: http://convotate.com

Click on "Intenet Explorer Test" (not my spelling!).

Then try adding a Conversation in the left hand list. You'll see that in Chrome it will create a new record and add it at the bottom of the list. In IE this same action inserts it at number 2 (always it seems), and items are in a random order.

[stefl]

Here is the relevant code:

View:

{{#each App.conversationsController contentBinding="App.conversationsController"}}
  {{#view App.ConversationListItemView contentBinding="this" tagName="li"}}
    {{#with content}}
      {{topic}}
    {{/with}}
  {{/view}}
{{/each}}

Model:

App.Conversation = Ember.Resource.define({

    url: "/conversations",

    schema: {
        id:   String,
        topic:  String,
        summary: String,
        space_id: String
    }
});

Controller:

App.conversationsController = SC.ResourceCollection.create({
  type: App.Conversation,
  content: null,

  url: function() {
      if(App.selectedSpaceController.get("content")) {
          return("/spaces/" + App.selectedSpaceController.get("content").get("id") + "/conversations");
      }
      else {
          return("/conversations");
      }
  }.property("App.selectedSpaceController.content"),

  createConversation: function(topic) {
      var conversation = App.Conversation.create({ topic: topic || '', space_id: App.selectedSpaceController.content.get("id") });
      conversation.save().done(function(e) {
          conversation.set("id", e.id);
          App.conversationsController.addObject(conversation);
          App.selectedConversationController.set('content', conversation);
          App.Thought.url = App.thoughtsController.get("url");
          App.Participant.url = App.participantsController.get("url");
          App.Idea.url = App.ideasController.get("url");
          //App.conversationsController.contentDidChange();
          App.thoughtsController.expire();
          App.participantsController.expire();
          App.ideasController.expire();
          resizeAreas();
          to_alert = ""
          _.each(App.conversationsController.get("content") , function(c) {to_alert = to_alert + c.get("topic") + " : " } );
          alert(to_alert);
      });
  },
  conversationCount: function() {
      console.log("RELOAD CONVERSATION COUNT");
      if(this.get("content")) {
          var result = this.get('content').length;
          return result;
      }
    // Tell Ember that this computed property depends on content
  }.property('content')
});

Related views:

App.ConversationListItemView = Em.View.extend({
    classNameBindings: ['isSelected'],

    mouseDown: function() {
        var content = this.get('content');
        App.selectedConversationController.set('content', content);
        App.Thought.url = App.thoughtsController.get("url");
        App.Participant.url = App.participantsController.get("url");
        App.Idea.url = App.ideasController.get("url");
        App.thoughtsController.expire();
        App.participantsController.expire();
        App.ideasController.expire();
        resizeAreas();
        $(".pill-content div.active").removeClass("active");
        $(".pills li.active").removeClass("active");
        $(".pill-content div:nth-child(1)").addClass("active");
    },
    touchStart: function() {
        return this.mouseDown(touch);
    },
    isSelected: function() {
        var selectedItem = App.selectedConversationController.get('content');
        var content = this.get('content');
        if (content == selectedItem) {
            return true;
        }
        return false;
    }.property('App.selectedConversationController.content')
});

App.CreateConversationView = SC.TextField.extend({
    insertNewline: function() {
        var value = this.get('value');

        if (value) {
            App.conversationsController.createConversation(value);
            this.set('value', '');
        }
    }
});

[stefl]

I've verified that the items in the controller's "content" are in fact in the right order. So perhaps this isn't an Ember Resource issue...

[staugaard]

Yeah if the collection in fact is ordered correctly, then I don't see how it could be an ember-resource problem