Question

I am playing with Ember and I am trying to use jquery ui sortable. Here is the code I used before ember that worked just fine:

$("ul.photo_list").sortable({
axis: 'x, y',
dropOnEmpty: false,
//handle: '.handle',
cursor: 'crosshair',
items: 'li',
opacity: 0.9,
scroll: true,
update: function(){
  $.ajax({
    type: 'post',
    data: $(".photo_list").sortable('serialize'),
    dataType: 'script',
    complete: function(request){
    },
    url: '/admin/projects/photos/sort})
  }
});

Now with Ember I have this code but it sends undefined to the server:

// Project Model
App.Project = Ember.Object.extend({
  _id: '',
  title: '',
  info: '',
  testimonial: '',
  type: '',
  created_at: '',
  updated_at: '',
  photos: [],
  available_types: [
    {value: 'landscape', name: 'Landscape', selected: false},
    {value: 'remodel', name: 'Remodel', selected: true},
    {value: 'new', name: 'New', selected: false}
  ],
  formattedDate: function () {
    return (new Date(this.get("created_at"))).toDateString();
  }.property("created_at"),
  formattedType: function () {
    return this.get("type").charAt(0).toUpperCase() + this.get("type").slice(1);
  }.property("type"),
  isPhotos: function () {
    var photos = this.get("photos");
    if (photos.length > 0) {
      return true;
    } else {
      return false;
    }
  }.property("photos")
});

App.currentProject = App.Project.create();

// Project Controller
App.projectsController = SC.ArrayController.create({
  content: [],
  loadProject: function(id) {
    var self = this;
    $.ajax({
      url: '/admin/projects/' + id,
      dataType: 'json',
      success: function(data) {
        if (data.photos) {
          data.photos = data.photos.map(function(photo) {
            return {
              _id: photo._id,
              photo: photo.photo,
              position: photo.position,
              thumb_url: '/assets/thumb_' + photo.photo,
              large_url: '/assets/large_' + photo.photo
            };
          });

        } else {
          data.photos = [];
        }
        App.currentProject.setProperties(data);
      },
      error: function() {
        console.log('Error')
      }
    });
  },
  createProjectFromJSON: function(json) {
    return App.Project.create(json);
  }
});

// View
App.ProjectView = Ember.View.extend({
  templateName: "projectShow",
  isPhotosBinding: "App.currentProject.isPhotos",
  photosBinding: "App.currentProject.photos",
  projects: function() {
    if (App.projectPagination.page <= 1) {
      Ember.routes.set('location', '!/projects');
    } else {
      Ember.routes.set('location', '!/projects?page=' + App.projectPagination.page);
    }
  },
  newProject: function() {
    Ember.routes.set('location', '!/projects/new');
    App.Router.project_new();
  },
  editProject: function() {
    App.currentProject.set('isEditing', true);
    return false;
  },
  didInsertElement: function() {
    console.log(App.currentProject.photos);
    this._super();
    this.$().sortable({
      items: 'li',
      opacity: 0.85,
      update: function(){
        console.log(App.currentProject.get('photos'));
        $.ajax({
          type: 'post',
          data: $("ul.photo_list").sortable('serialize'),
          dataType: 'script',
          complete: function(request){
          },
        url: '/admin/projects/' + App.currentProject._id + '/photos/sort'})
      }
    });
  }
});

I am still trying to find my way around Ember so any improvements are much appreciated. I am just not sure how I am suppose to update the position/order of App.currentProjects.photos so I can send that to the server to update the position because serializing ul.photo_list sends undefined back to the server.

Answer 1

Schedule the ajax call at the end of the RunLoop. In this way you know that the DOM was updated.

Ember.run.schedule('timers', function () {
    $("ul.photo_list").sortable({
        axis: 'x, y',
        dropOnEmpty: false,
        //handle: '.handle',
        cursor: 'crosshair',
        items: 'li',
        opacity: 0.9,
        scroll: true,

        update: function(){
            $.ajax({
            type: 'post',
            data: $(".photo_list").sortable('serialize'),
            dataType: 'script',
            complete: function(request){
            },
            url: '/admin/projects/photos/sort'
        }
    });
});