Проблема с шаблоном Ember с jQuery sortable

Question

Я пытаюсь создать простой компонент Ember, который обертывает плагин jQuery UI Sortable. К сожалению, у меня проблема с шаблоном компонента, когда sortable отменен, а модель обновлена ​​вручную. Похоже, что DOM не отражает состояние модели. Я не могу найти, почему.

Я создал JS Bin, чтобы представить эту проблему. Когда вы меняете позицию позиции, первый из них должен быть удален. К сожалению, это работает случайным образом.

Что не так с этим кодом?

Answer 1

Вот ваш JS Bin сортировкой компонент:

App.MyListComponent = Ember.Component.extend({ 
    tagName: 'ul', 

    didInsertElement() { 
    let opts = {}; 
    opts.update = this.updateList.bind(this); 
    this.$().sortable(opts); 
    }, 

    updateList() { 
    this.$().sortable('cancel'); 
    Ember.run.next(() => { 
     this.get('content').removeAt(0); 
    }); 
    } 
}); 

И тогда это ваш JS Bin updated с кодом из ember-ui-sortable repo на следующее:

App.MyListComponent = Ember.Component.extend({ 
    tagName: 'ul', 

    uiOptions: [ 
    'axis', 
    'containment', 
    'cursor', 
    'cursorAt', 
    'delay', 
    'disabled', 
    'distance', 
    'forceHelperSize', 
    'forcePlaceholderSize', 
    'grid', 
    'handle', 
    'helper', 
    'opacity', 
    'placeholder', 
    'revert', 
    'scroll', 
    'scrollSensitivity', 
    'scrollSpeed', 
    'tolerance', 
    'zIndex' 
    ], 

    destroySortable: Ember.on('willDestroyElement', function() { 
    this.$().sortable('destroy'); 
    }), 

    initSortable: Ember.on('didInsertElement', function() { 
    let opts = {}; 

    ['start', 'stop'].forEach((callback) => { 
     opts[callback] = Ember.run.bind(this, callback); 
    }); 

    this.$().sortable(opts); 

    this.get('uiOptions').forEach((option) => { 
     this._bindSortableOption(option); 
    }); 
    }), 

    contentObserver: Ember.observer('content.[]', function() { 
    Ember.run.scheduleOnce('afterRender', this, this._refreshSortable); 
    }), 

    move(oldIndex, newIndex) { 
    let content = this.get('content'); 
    let mutate = this.getWithDefault('mutate', true); 
    let item = content.objectAt(oldIndex); 

    if (content && mutate) { 
     content.removeAt(oldIndex); 
     content.insertAt(newIndex, item); 
    } 

    if(!mutate){ 
     this.attrs.moved(item, oldIndex, newIndex); 
    } 

    }, 

    start(event, ui) { 
    ui.item.data('oldIndex', ui.item.index()); 
    }, 

    stop(event, ui) { 
    const oldIndex = ui.item.data('oldIndex'); 
    const newIndex = ui.item.index(); 

    this.move(oldIndex, newIndex); 
    }, 

    _bindSortableOption: function(key) { 
    this.addObserver(key, this, this._optionDidChange); 

    if (key in this) { 
     this._optionDidChange(this, key); 
    } 

    this.on('willDestroyElement', this, function() { 
     this.removeObserver(key, this, this._optionDidChange); 
    }); 
    }, 

    _optionDidChange(sender, key) { 
    this.$().sortable('option', key, this.get(key)); 
    }, 

    _refreshSortable() { 
    if (this.isDestroying) { return; } 
    this.$().sortable('refresh'); 
    } 
}); 

Как вы видите, довольно немного дополняет ваш оригинал, поэтому вы можете взглянуть на то, что вы пропустили, и, надеюсь, это вам поможет. Возможно, было бы неплохо установить этот компонентный аддон через ember-cli, но также посмотреть на конкурирующие решения, например ember-sortable и другие, используя что-то вроде ember-observer.