Turbolinks et Contrôleur des actifs spécifiques

J'ai modifié application.html.erb d'utiliser le contrôleur des actifs spécifiques:

application.html.erb:

<!DOCTYPE html>
<html>
<head>
  <title>My Application</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= stylesheet_link_tag params[:controller], 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag params[:controller], 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
... other html template ...

Le problème est que, j'ai turbolinks installé. Lorsque je navigue dans le même contrôleur, turbolinks œuvres. Mais lorsque je passe à un autre contrôleur, le turbolinks va effectuer un rechargement complet. Est-il possible de résoudre ce problème?

OriginalL'auteur Sarun Intaralawan | 2014-07-12

12

Turbolinks

Turbolinks prend la <body> de votre page HTML, et ça change avec l'Ajax, laissant la <head> zone intacte.

Ce seulement fonctionne si votre <head> restera la même - sinon comment peut-il être constant? Donc dans le sens de l'évolution de votre page de contrôleur /actifs, vous allez ont de passer par une pleine page de mise à jour sans Turbolinks (au moins si vous utilisez Turbolinks sans le piratage)

Je recommanderais le correctif de ce serait de modifier votre contrôleur spécifique de la structure des actifs, en particulier pour faire aussi peu de changements à la <head> de la zone que possible.

--

Turbolinks Suivi

À la lecture de l' Turbolinks documentation, vous pourriez être en mesure de bénéficier de la suppression de la turbolinks-data-track option à partir de votre contrôleur-actifs spécifiques:
```
<%= javascript_include_tag controller_name, 'data-turbolinks-track' => false %>
```
Vous pouvez suivre l'évolution de certains actifs, comme application.js et de l'application.css,
que vous voulez vous assurer sont toujours de la version la plus récente à l'intérieur d'un
Turbolinks session. Ceci est fait par le marquage de la valeur des actifs des liens avec
données turbolinks-piste, comme suit:

<link href="/assets/application-9bd64a86adb3cd9ab3b16e9dca67a33a.css"
type="text/css" data-turbolinks-track>

Si ces actifs changement de l'Url (intégrer un md5 de timbre pour assurer ce), la page va faire un plein
recharger au lieu de passer par Turbolinks. Cela garantit que toutes les
Turbolinks sessions sera toujours en cours d'exécution hors de votre dernière JavaScript
et CSS.

--

nom_controller

Quelque chose que vous allez bénéficier de l'aide de l' controller_name helper (à la place de params[:controller]):
```
<%= javascript_include_tag 'application', controller_name, 'data-turbolinks-track' => true %>
```
OriginalL'auteur Richard Peck
3

Mettre votre contrôleur spécifique js dans la balise body. Depuis turbolinks de ne pas toucher le corps html, vous permettra de recharger ce morceau de code js à chaque fois que vous visitez la page.

Dans votre cas
```
<body>
  <%= javascript_include_tag params[:controller] %>
  ...
</body>
```
Mais si vous avez beaucoup de code dans votre contrôleur de js, vous remarquerez peut-être que la solution ci-dessus est une sorte de temps. Parce que lorsque vous visitez la page, ce gros morceau de code obtiendrez reloaded. Alors, comment faire face?

La méthode suivante peut causer certains de jquery événements se limite à de multiples reprises. C'est un problème de turbolinks. Lire cet article http://staal.io/blog/2013/01/18/dangers-of-turbolinks/

Une solution plus efficace

Essentiellement lorsque le premier utilisateur visite votre site, vous charger tout le code js, faire en sorte de contrôleur de celles qui sont spécifiques à ne pas se faire rouler (enveloppement dans des fonctions respectivement) et de les enregistrer dans une variable globale, disons, Site. Ensuite vous déclenchez votre contolleur spécifiques js par écrire quelque chose comme
```
<script>
$(document).on("ready page:load", function () {
  Site.load('<%= controller_name %>');
}
</script>
```
dans la balise body.

De cette façon, le réel contolleur spécifiques du code js n'est chargée qu'une seule fois et se déclencher en cas de besoin.

mise en œuvre

app/assets/javascripts/site.js
```
var site;
if(!window.Site) {
  site = window.Site = {};
  site.controllers = {}

  site.load = function (controller) {
    if (this.controllers.hasOwnProperty(controller)) {
      this.controllers[controller].call();
    }
  };

  site.add = function (controller, fn) {
    this.controllers[controller] = fn;
  }
}
```
envelopper votre contrôleur de js dans les fonctions et les enregistrer dans Site. Par exemple, le users.js

app/assets/javascripts/site.js
```
Site.add("users", function () {
  //UserController related js code
}
```
dans votre application.js charger tous.

app/assets/javascripts/site.js
```
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require site
//= require_tree .
```
Puis de la mise en page déclencher le contrôleur spécifique js.

app/views/layouts/application.html.erb
```
<body>
  <script>
  $(document).on("page:load", function () {
    Site.load('<%= controller_name %>');
  }
  </script>
  <%= yield %>
</body>
```
Comment l'action spécifique du code js?

Juste modifier le site.js et la mise en page. Et je termine avec le fragment de code suivant.
```
(function (global) {
var site;
if(global.Site) {
return;
}
site = global.Site = {};
site.controllers = {};
site.actions = {};
site.load = function (name) {
var keys = name.split(".");
var c = keys[0];
var cs = this.controllers;
var as = this.actions;
var i;
if (cs.hasOwnProperty(c)) {
for (i =0 ; i < cs[c].length; i++) {
cs[c][i].call();
}
}
if (keys.length > 1 && as.hasOwnProperty(name)) {
for (i =0 ; i < as[name].length; i++) {
as[name][i].call();
}
}
};
site.add = function (name, fn) {
var keys = name.split(".");
var lv = keys.length > 1 ? this.actions : this.controllers;
if (!lv.hasOwnProperty(name)) {
lv[name] = [fn];
} else {
lv[name].push(fn);
}
};
})(window);
```
app/views/layouts/application.html.erb
```
<body>
<script>
$(document).on("ready page:load", function () {
Site.load('<%= controller_name %>.<%= action_name %>');
}
</script>
<%= yield %>
</body>
```
Liées

Voici une vidéo intéressante sur le chargement javascript, css et autres actifs pour le single page apps comme vous pouvez le regarder.

OSCON 2014: Comment Instagram.com Œuvres; Pete Chasse

https://www.youtube.com/watch?v=VkTCL6Nqm6Y

OriginalL'auteur wenjun.yan

Vous devez vous connecter pour publier un commentaire.

Une solution plus efficace

mise en œuvre

Comment l'action spécifique du code js?

Liées