Liste de tri en utilisant Ember.Js et Jquery.ui

StackOverflow https://stackoverflow.com/questions/8991815

  •  13-11-2019
  •  | 
  •  

Question

Je suis en difficulté pour obtenir une liste créée par Ember.Js triable à l'aide de jQuery.ui.

Le contrôleur ressemble à ceci: 

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

et le modèle comme celui-ci: 

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

Mes questions sont:

  • Où est-ce que je vais mieux appeler la fonction de tri () sur l'UL "#savetable"?Existe-t-il un événement sur le contrôleur et une poignée à l'élément HTML rendu que je peux utiliser?

  • Comment connecter les rappels JQuery.UI au contrôleur Ember.JS?Comme, disons, d'envoyer la liste mise à jour sur le serveur via AJAX?

    Tout cela peut être fait contourner l'abstraction Ember.js, mais je veux le faire la "bonne façon".

    ou est le concept entier défectueux et Ember.js fournit une fonction "triable" sans jquery.ui?

Était-ce utile?

La solution

Vous pouvez probablement implémenter EM.View # didinsertelement [1] où vous pouvez être sûr que l'élément DOM est créé et inséré dans le corps.Ce serait là où vous appelez $ .Sortable: 

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

Le modèle: 

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

(Je n'ai pas essayé ce code mais je ne vois pas pourquoi cela ne devrait pas travailler ...)

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

Autres conseils

Vous devez obtenir l'emploi pour faire le tri en utilisant son propre mixin triable et un attribut sur chaque élément.Lorsque vous appelez votre initial didinsertelement sur l'élément parent, joignez une fonction de déclenchement de l'événement de mise à jour à chacun des éléments, puis appellez-le triable ('Annuler') après l'enregistrement de la commande complète (avant l'annulation), vous mettez ensuite à jour chacun de ceux-ci.Attributs d'articles.

Voici un tutoriel sur ce processus même:

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

J'ai vu des exemples passés - vous modifiez l'ordre de tri du contenu dans la liste Ember.Vous pouvez utiliser les mêmes fonctions de tri que Ember Enumerables fournit.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top