Сортируемый список с использованием Ember.js и jQuery.ui

Я пытаюсь получить список, созданный с помощью Ember.js, с помощью jQuery.ui.

Контроллер выглядит следующим образом:

App.ThingyController = Ember.ArrayController.create
  content: [
    { name: 'Item1' },
    { name: 'Item2' }
  ]

и шаблон, подобный этому:

<script type="text/x-handlebars">
  {{#collection contentBinding="App.ThingyController" tagName="ul" id="sortable"}}
    {{content.name}}
  {{/collection}}
</script>

Мои вопросы:

  • Где лучше всего называть функцию sortable() на ul "#sortable"? Есть ли событие на контроллере и дескриптор отображаемого HTML-элемента, который я могу использовать?

  • Как подключить обратные вызовы jQuery.ui к контроллеру Ember.js? Как, скажем, отправить обновленный список на сервер через ajax?

Все это можно сделать, обойдя абстракцию Ember.js, но я хочу сделать это "правильным путем".

Или вся концепция ошибочна, и Ember.js обеспечивает "сортируемую" функцию без jQuery.ui?

Ответы

Ответ 1

возможно, вы могли бы реализовать Em.View # didInsertElement [1], где вы можете быть уверены, что элемент dom создан и вставлен в тело. это будет где вы вызываете $.sortable:

App.MySortableView = Em.CollectionView.extend({
  tagName: "ul",
  didInsertElement: function() {
    this.$().sortable()
  }
})

шаблон:

{{#collection "App.MySortableView" ...}}
  ...
{{/collection}}

(я не пробовал этот код, но я не понимаю, почему он не должен работать...)

[1] https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js#L738

Ответ 2

Вам нужно заставить Ember выполнять сортировку, используя свой собственный сортируемый mixin и некоторый атрибут для каждого элемента. Когда вы вызываете свой начальный файл didInsertElement в родительском элементе, присоединяете функцию триггера события обновления к каждому из элементов и вызываете его сортировку ( "отменить" ) после записи полного порядка (до отмены), затем вы обновляете каждую из атрибуты элементов.

Вот учебник по этому самому процессу:

http://nerdyworm.com/blog/2013/04/26/ember-dot-js-drag-and-drop-sorting-with-jquery-sortable/

Ответ 3

Я видел прошлые примеры - вы меняете порядок сортировки содержимого в списке ember. Вы можете использовать те же функции сортировки, что и embererables ember.