Y a-t-il un moyen d'utiliser quelque chose comme ROR Turbolinks et: formes distantes et liens à Phoenix?
Les formes et les liens fondamentalement distants et les turbolinks sont une approche Qu'est-ce que Cette technique le rend très est un est une approche : distant Formulaires et liens , c'est une spéciale L'option de rubis sur les rails forme et des liens aidant que, au lieu de soumettre des formulaires et de naviguer, les liens envoient une demande AJAX au serveur, le serveur à son tour répondent avec certains JavaScript et le navigateur l'évalue.
4 Réponses :
Turbolinks est la bibliothèque JavaScript. Vous pouvez l'utiliser partout. Voir https://github.com/turbolinks/turbolinks/tree/ab019670632b719b3d2ecdccb158ff9f4f47746f# Installation-utilisation-webpack et l'intégrer similaire au brunch.
Installez Turbolinks Ajouter ou utilisez WebPack avec Phoenix http://www.phoenixframework.org/docs/staticaassets#Section-Utilisation-Another-Asset-Management-System-in-phoenix
Mise à jour: Exemple repo ici https://github.com/troush/turbolinks_phoenix NPM Installation --Save Turbolinks
Node_Modules / Turbolinks / dist / Tubolinks.js à votre brunch-config.js en tant que dépendance.
En ce qui concerne les formes distantes, vous pouvez simplement écrire du JavaScript (ou JQuery dans ce cas) vous-même, quelque chose comme ceci:
$("body").on("submit", "form[data-remote='true']", function(e) {
e.preventDefault();
let $form = $(this);
$.ajax({
method: $form.attr("method"),
url: $form.attr("action"),
data: $form.serialize(),
dataType: "script",
beforeSend: function(_jqXHR, _settings) {
// add a loader or whatever
},
complete: function(_jqXHR,_textStatus) {
// remove a loader or whatever
}
});
});
Oui, merci, l'a déjà fait. Malheureusement, JS ne suffit pas, vous devez spécifier des formats JS dans le routeur Phoenix, gérer les jetons CSRF et d'autres problèmes mineurs. Serait bien d'avoir tout ce genre de choses hors de la boîte.
@Alexeypetrushin Pourquoi auriez-vous besoin de gérer les jetons CSRF?
Si vous cliquez sur le lien qui aboutit à la demande d'Ajax Post - vous devez transmettre un jeton CSRF avec celui-ci.
@Alexeypetrushin Vous ne pouvez pas simplement le générer à l'aide du lien Phoenix_html S. () ? Il générera un lien enveloppé dans une forme, puis, lorsque le lien est cliqué, vous pouvez simplement soumettre le formulaire, qui contient déjà le jeton.
Merci, oui c'est une solution possible, mais je devrais ensuite gérer ce formulaire spécialement - intercepter sa soumission et l'envoyer comme Ajax à la place. C'est définitivement une option, mais il semble que cela ne semble que l'ajout d'un jeton CSRF à la demande Ajax directement est un moyen plus facile. (Mais, ce sont juste mes préférences, peut-être que ce n'est pas vraiment la meilleure façon de le gérer ...)
Le lien de tous les rails / forme de la magie à distance (et d'autres autres choses belles) se produit avec cette bibliothèque JavaScript:
https://github.com/rails/jquery- UJS / BLOB / MASTER / SRC / RAILS.JS
Je ne vois pas pourquoi cela ne fonctionnerait pas avec Phoenix (peut-être avec quelques modifications).
JQuery-Ujs me manque vraiment à Phoenix. Quel type de changements devrions-nous faire afin que je puisse l'utiliser à Phoenix comme des rails?
Il est mort simple d'utiliser Turbolinks avec Phoenix. Vous n'avez pas besoin de changer de changement sur vos formulaires. Faites cela pour vous lever et courir avec Turbolinks:
NPM Installation --Save Turbolinks
- Ajouter Turbolinks à votre
Brunch-config.js dans la section NPM:
npm: {
Activé: vrai,
Whitelist: ["Phoenix", "Phoenix_html", "Turbolinks"]]
}
- Importez Turbolinks dans votre
app.js :
Importer "phoenix_html"
Importer "Turbolinks"
...
C'est ça. Vous obtiendrez une augmentation de la vitesse sur votre site sans avoir un impact sur le référencement. Vous pouvez toujours décider plus tard de modifier des formulaires vers une API JSON ou d'aller la route spa pleine soufflée si vous avez vraiment besoin.
Une description courte ou une liaison ce que Turbolinks et: Les formulaires distants nous aideraient à répondre à votre question.
Comme Jose a dit une fois: Phoenix est si rapide que tous les liens sont des turbolinks.
@JustMichael Phoenix est en effet rapide, mais le serveur et le réseau ne constituent pas la seule source de latence, Browser introduit également ses propres latences (analyse, JS analysant etc ...).
@Alexeypetrushin Juste une blague, apparemment inappropriée, je m'excuse pour cela.
@Alexeypetrushin j'ai créé un exemple de repo avec Turbolinks Github.com/troush/turbolinks_Phoenix