Question

我正在玩Ember，我正在尝试使用jquery ui sortable。这是我在ember之前使用的代码，它运行得很好：

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

现在有了Ember，我有这个代码，但它发送未定义到服务器：

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

Ember.js jQuery UI可排序

1 个答案: