初期化オン/オフのトグル要素

Question

私はアカウントテーブルを持っており、JQueryトグルを使用してオン/オフを切り替えることができるようにしたいと考えています。最初は、各アカウントのトグルを初期化する必要があります（いずれかのアカウントがオンまたはオフに設定されています）。私はページの読み込みでこれをやりたい

マイジェイドテンプレートパーツ：

tbody 
    each account in accounts 
    tr 
     td 
     .col-sm-7.control-label 
      div(class='toggle toggle-success', onload='initToggle(#{account.IsActive}, this)') 
     | #{account.Id} 
     td #{account.Email} 

私のinitトグル機能：

script. 
    jQuery(document).ready(function() { 
    function initToggle(isActive, element) 
    { 
     if (isActive) 
     element.toggles({'on': true}); 
     else 
     element.toggles({'on': false}); 
    } 

私の問題：

私は私の関数呼び出しのためのonload=を使用する場合はIでエラーが発生しない すべて。私はonclick=として関数呼び出しを使用する場合は、GoogleのChromeは示しています

Uncaught ReferenceError: initToggle is not defined

どのように私はきちんと私のオン/オフのトグルを初期化するのでしょうか？

Answer 1

関数は "準備完了"コールバック内で宣言/スコープされているため、エラーが発生します。 それを修正するには、私はロジックを移動するとJavaScriptがときのinit物事を決定聞かせ：

ジェイド一部

div(class='toggle toggle-success', data-is-active='#{account.IsActive}') 

Javascriptの一部

jQuery(document).ready(function ($) { 
    $(".toggle").each(function() { 
    var $this = $(this); 
    var isActive = $this.data("isActive") === "true"; 
    // or .data("is-active") for jQuery 2, see https://api.jquery.com/data/ 
    $this.toggles({'on': isActive}); 
    }); 
}); 

ヒスイ側をhtml data attributeを使用して情報を保存し、js側ではドキュメントの準備ができたらそれを使用します。