Jinja2テンプレートのデータを使ってJavascriptオブジェクトを初期化する方法は？

Question

いくつかのデータがテンプレートに渡されるFlaskアプリケーションで作業しています。そのデータをオブジェクトの複数のインスタンスで使用できるようにしたいとします。私はちょうどunconstructedモジュールのオブジェクトに関数を呼び出すことはできません

var Module = function(selector) { 
 
    var targetDiv = selector, 
 
    targetData = 'lorem ipsum sit dolor', 
 
     
 
    show = function() { 
 
     $('<p>' + targetData + '</p>').appendTo(targetDiv); 
 
    }; 
 
    
 
    return { 
 
     show: show, 
 
    }; 
 
}; 
 

 
$(document).ready(function() { 
 
    firstModule = new Module($('#first')); 
 
    secondModule = new Module($('#second')); 
 
    
 
    firstModule.show(); 
 
    secondModule.show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='first'></div> 
 
<div id='second'></div>

、ので、私の次のステップ：ここで私はちょうど私の.jsファイルに必要なデータをハードコードならば、それは次のようになります私はからModuleFactory.setData({{data}});を呼び出そうと次に

var ModuleFactory = function() { 
    var targetData = null, 

    setData = function(data) { 
     targetData = data; 
    }, 

    create = function(selector) { 
     return new Module(selector, data); 
    }; 

    return { 
     setData: setData, 
     create: create, 
    }; 
}(); 

：私は神社からのデータをロードし、そこから[モジュールを作成することができModuleFactory静電気などを作成することですタグをHTMLに入れ、.js内のModuleFactory.create($('#first')).show();のようなことを行います

もちろん、HTMLにModuleFactoryを使用する前に私の.jsファイルを含める必要があるため、ファクトリが初期化される前にオブジェクトを構築します。

（この時点を過ぎると、私の回避策の試みが問題に関連されて停止。）とにかく

、私のJSモジュールに神社からデータを取得する正しい方法は何ですか？共通のパターンや何かが必要です。

Answer 1

これはひどい感じているが、それは動作します：

は、パラメータとして所望のデータを取るrunProgram方法でオブジェクトを持っている、そして以前に文書レディ機能の内側にあったロジックを実行。例えばHTMLで

var ProgramRunner = function() { 
    var runProgram = function(data) { 
     ModuleFactory.setData(data); 
     firstModule = ModuleFactory.create($('#first')); 
     firstModule.show(); 
    }; 
    return { 
     runProgram: runProgram; 
    }; 
}; 

それからちょうど

<script> 
    $(document).ready(function() { ProgramRunner.runProgram({{data}}) });  
</script> 

。

（これを処理する方がはるかに良い方法があると思われるので、質問を残しておきます）