Raylar 4: Turbo bağlantılar ile $ (Document) .ready () nasıl kullanılır

JS dosyalarını "raylar yolu" düzenlemeye çalışırken Rails 4 uygulamamda bir sorunla karşılaştım. Daha önce farklı görüşlere dağılmışlardı. Onları ayrı dosyalar halinde düzenledim ve varlıklar kanalıyla derledim. Ancak, turbo-linking açıldığında jQuery'nin "hazır" etkinliğinin sonraki tıklamalarda tetiklenmediğini öğrendim. Bir sayfayı ilk kez yüklediğinizde çalışır. Ancak bir bağlantıyı tıkladığınızda, içindeki hiçbir şey ready( function($) {yürütülmez (sayfa gerçekte tekrar yüklenmediğinden). İyi açıklama: burada .

Benim sorum şu: Turbo bağlantılar açıkken jQuery olaylarının düzgün çalışmasını sağlamanın doğru yolu nedir? Betikleri Rails'e özgü bir dinleyiciye sarar mısınız? Ya da belki raylarda gereksiz kılan bir sihir vardır? Belgeler, özellikle application.js gibi manifest (ler) yoluyla birden fazla dosya yükleme konusunda, bunun nasıl çalışması gerektiği konusunda biraz belirsizdir.

İşte yaptığım şey ... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

son satır, turbo bağlantılarının tetikleyeceği sayfa yükünü dinler.

Düzenle ... Javascript sürümü ekleniyor (istek başına):

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

Düzenleme 2 ... Raylar 5 (Turbolinks 5) için page:loadolur turbolinks:loadve hatta ilk yüklemede ateş açılacak. Böylece aşağıdakileri yapabiliriz:

$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});

Bu sorunu çözmek için başka bir seçenek öğrendim. Eğer yüklerseniz mücevher bunun için Raylar Turbolinks olayları bağlayacak her zamanki şekilde jQuery yazabilirsiniz böylece olaylar. Sadece eklemek hemen sonra (varsayılan olarak: js manifest dosyasında ).jquery-turbolinksdocument.readyjquery.turbolinksjqueryapplication.js

Son zamanlarda onunla başa çıkmanın en temiz ve kolay anlaşılır yolunu buldum:

$(document).on 'ready page:load', ->
  # Actions to do

VEYA

$(document).on('ready page:load', function () {
  // Actions to do
});

DÜZENLE bağlı yetki verilmiş olaylarınız
varsa , bunları işlevin dışına eklediğinizden emin olun , aksi takdirde her birinde geri tepme olurdocumentreadypage:load olayda (aynı işlevlerin birden çok kez çalışmasına neden olur). Örneğin, böyle aramalarınız varsa:

$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...

Onları dışarı çıkarın ready işlevden şöyle:

$(document).on 'ready page:load', ->
  ...
  ...

$(document).on 'click', '.button', ->
  ...

Adresine bağlı yetki verilen olayların olaya bağlı olması documentgerekmez ready.

Bunu Rails 4 belgesinde , DemoZluk'un çözümüne benzer, ancak biraz daha kısa bulundu:

$(document).on 'page:change', ->
  # Actions to do

VEYA

$(document).on('page:change', function () {
  // Actions to do
});

Arayan harici komut dosyalarınız $(document).ready()varsa veya mevcut tüm JavaScript'inizi yeniden yazmaktan rahatsız olamıyorsanız, bu değerli taş kullanmaya devam etmenizi sağlar$(document).ready() TurboLinks ile : https://github.com/kossnocorp/jquery.turbolinks

Yeni ray kılavuzlarına göre, doğru yol aşağıdakileri yapmaktır:

$(document).on('turbolinks:load', function() {
   console.log('(document).turbolinks:load')
});

veya kahve dilinde:

$(document).on "turbolinks:load", ->
alert "page has loaded!"

Etkinliği dinlemeyin, $(document).readyyalnızca bir etkinlik başlatılacaktır . Sürpriz yok, jquery.turbolinks gem kullanmaya gerek yok .

Bu, sadece raylar 5 ile değil, 4.2 ve üstü raylarla çalışır.

NOT: Temiz, yerleşik bir çözüm için @ SDP'nin cevabına bakın

Aşağıdaki gibi sabitledim:

Diğer uygulama bağımlı js dosyaları dahil etmeden önce dahil etme sırasını aşağıdaki gibi değiştirerek application.js'yi eklediğinizden emin olun:

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

Bağlanmayı işleyen genel bir işlev tanımlayın application.js

// application.js
window.onLoad = function(callback) {
  // binds ready event and turbolink page:load event
  $(document).ready(callback);
  $(document).on('page:load',callback);
};

Şimdi aşağıdaki gibi şeyler bağlayabilirsiniz:

// in coffee script:
onLoad ->
  $('a.clickable').click => 
    alert('link clicked!');

// equivalent in javascript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('link clicked');
});

Yukarıdakilerin hiçbiri benim için çalışmıyor, bunu jQuery's $ (document) .ready kullanarak çözdüm, ancak bunun yerine addEventListener kullanın.

document.addEventListener("turbolinks:load", function() {
  // do something
});

$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'

Kullanmanız gerekenler:

document.addEventListener("turbolinks:load", function() {
  // your code here
})

turbolinklerden doc .

Ya kullanın

$(document).on "page:load", attachRatingHandler

veya aynı etkiyi elde etmek için jQuery'nin .on işlevini kullanın

$(document).on 'click', 'span.star', attachRatingHandler

daha fazla ayrıntı için buraya bakın: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

"Hazır" işlevini kaydetmek ve olaylara bağlamak için bir değişken kullanmak yerine, readyher page:loadtetiklendiğinde olayı tetiklemek isteyebilirsiniz .

$(document).on('page:load', function() {
  $(document).trigger('ready');
});

İşlerin iki kez yürütülmemesini sağlamak için yaptığım şey:

$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});

jquery-turbolinksMücevher kullanarak veya birleştirerek $(document).readyve / $(document).on("page:load")veya $(document).on("page:change")kendi başına kullanmak beklenmedik şekilde davranıyor - özellikle de geliştirme aşamasındaysanız.

Benim için harika çalışan ve aşağıdakilerin kullanımını detaylandıran aşağıdaki makaleyi buldum :

var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)

Turbolinks 5'e yükseltme yapanlar için burayı bırakacağımı düşündüm : kodunuzu düzeltmenin en kolay yolu:

var ready;
ready = function() {
  // Your JS here
}
$(document).ready(ready);
$(document).on('page:load', ready)

için:

var ready;
ready = function() {
  // Your JS here
}
$(document).on('turbolinks:load', ready);

Referans: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

$(document).ready(ready)  

$(document).on('turbolinks:load', ready)

Sonunda bu kadar çok çözümün geldiğini test etti. Bu birçok kod kesinlikle iki kez çağrılmaz.

      var has_loaded=false;
      var ready = function() {
        if(!has_loaded){
          has_loaded=true;
           
          // YOURJS here
        }
      }

      $(document).ready(ready);
      $(document).bind('page:change', ready);

Raylarım 4 projeleri için genellikle aşağıdakileri yaparım:

İçinde application.js

function onInit(callback){
    $(document).ready(callback);
    $(document).on('page:load', callback);
}

Sonra js dosyalarının geri kalanı, yerine kullanarak $(function (){})ÇağrıyıonInit(function(){})

İlk olarak, jquery-turbolinksgem yükleyin . Ve sonra, senin gövdesinin ucundan senin dahil JavaScript dosyaları taşımak için unutma application.html.erbonun için <head>.

Burada açıklandığı gibi , uygulama javascript bağlantısını hız optimizasyonu nedeniyle altbilgiye koyduysanız, etiketin içeriğinden önce yüklenmesi için etikete taşımanız gerekir. Bu çözüm benim için çalıştı.

Bir işlevi kullanırken işlevlerimi iki katına çıkardım readyve turbolinks:loadkullandım,

var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};

Bu şekilde, turbolinkler destekleniyorsa işlevleriniz iki katına çıkmaz!