Ember.js jQuery UI Sortable

Question

私はEmberと遊んでいて、jquery ui sortableを使用しようとしています。ここで私はうまく働いていた燃えさしの前に使用されるコードは次のとおりです。

$("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}) 
    } 
}); 

今エンバーと、私はこのコードを持っているが、それはサーバに未定義送信します

// 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'}) 
     } 
    }); 
    } 
}); 

私はまだ自分の道を見つけようとしていますEmberの周りにはどんな改良も高く評価されています。 App.currentProjects.photosの位置/順序をどのように更新すればよいのか分かりませんので、ul.photo_listをシリアル化するとサーバーに未定義が戻ってくるため、サーバーに送信して位置を更新できます。

Answer 1

RunLoopの最後にajaxコールをスケジュールします。このようにして、DOMが更新されたことがわかります。

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' 
     } 
    }); 
});