10
votes

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

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

Le contrôleur ressemble à ceci: xxx

et le modèle comme celui-ci : xxx

Mes questions sont les suivantes:

  • 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?


0 commentaires

3 Réponses :


0
votes

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.


3 commentaires

Je vois, mais comment cela permet-il de faire une fonctionnalité de glisser-déposer comme fournie par JQRERY.UI ''s Soyable ()?


Désolé, je ne savais pas que vous vouliez aussi faire glisser la traînée et tomber. Ceci est juste une supposition, mais je laisserais des émers gérer l'affichage et le tri, mais lorsque vous faites glisser-déposer, j'utiliserais JQuery pour réorganiser le contenu de l'événement DROP. Ensuite, laissez Ember faire l'affichage.


Juste, c'est exactement ce que j'essaie. Je ne sais tout simplement pas comment.



6
votes

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: xxx

Le modèle: xxx

(Je n'ai pas essayé ce code mais je n'ai pas essayé ce code mais je n'ai pas essayé ce code mais je n'ai pas essayé Découvrez pourquoi cela ne devrait pas fonctionner ...)

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


1 commentaires

Merci, c'était ce que je cherchais. Le résultat jusqu'à présent: jsfiddle.net/gtwky



1
votes

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/


0 commentaires