カスタムウィジェットのdjango動的javadript

Question

私はカスタムウィジェットのレンダリングされたhtmlページにjavascriptコードを持っています。 jsコードをjsファイルに区切りたい

ただし、静的メディアファイルではなく動的である必要があります。

私は、カスタムウィジェットを書いた：

class CustomWidget(CustomWidgetBase): 
    css = { 
     'all': (
      config['custom_css'] + 
      config['extra_css'] 
     ) 
    } 
    js = (
     config['custom_js'] + 
     config['extra_js'] 
    ) 

    @property 
    def media(self): 
     media = super(CustomWidget, self).media 
     media.add_css(CustomWidget.css) 
     media.add_js(CustomWidget.js) 
     return media 

    def render(self, name, value, attrs=None): 
     attrs_for_textarea = attrs.copy() 
     attrs_for_textarea['hidden'] = 'true' 
     attrs_for_textarea['id'] += '-textarea' 
     html = super(CustomWidget, self).render(name,               value, attrs_for_textarea) 

     html += render_to_string(
      'app/custom_widget.html', 
      { 
       'id': attrs['id'].replace('-', '_'), 
       'id_src': attrs['id'], 
       'value': value if value else '', 
       'settings': json.dumps(self.template_contexts()), 
       'STATIC_URL': settings.STATIC_URL, 
       'CSRF_COOKIE_NAME': settings.CSRF_COOKIE_NAME, 
      } 
     ) 

     CustomWidget.js += (os.path.join(settings.STATIC_URL, 'app/my.js'),) 

     return mark_safe(html) 

'アプリ/ custom_widget.htmlは' JavaScriptのコードを持っています

{% load staticfiles %} 
<div id='{{ id_src }}'>{{ value|safe }}</div> 
<script> 
$(function() { 
    var {{ id }}_textarea = window.document.getElementById('{{ id_src }}-textarea'); 
    ... omitted ... 

私は「アプリ/ custom_widget.htmlにjavascriptのコードを移動したいのですが'を' app/my.js 'に置き換えます。これは、ウィジェットコードをjavascript宣言の順序に依存させるためです。

したがって、 'app/my.js'は、Djangoビューによって渡された値で動的に生成される必要があります。私は 'app/my.js'をページの下部に配置したいと思います。

ありがとうございます。

Answer 1

つのオプション：

1. あなたは、あなたの静的なJavaScriptをインポートする前に、それらが宣言されていることを確認すること、テンプレート内のスクリプトタグ内の変数宣言のリストを置くことができます。次に、静的なjavascriptは、サーバーが適切に設定した変数値を参照します。

2. HTML要素のデータ属性に動的値を設定します。次に、静的なjavascriptを書いて、それが操作しているものに基づいて適切なサーバーセットデータを検索します。

---

あなたのサンプルコードでやっていることは非常に複雑に見えると私はそれがあることが必要であるか分かりません。私が正しく解釈すると、カスタムウィジェットを挿入するときに、カスタムのJavaScriptの動作が適用されることを確認しようとしています。

私は、2番目のオプションはその動作に適していると思うし、おそらくjqueryを使用してできるだけ実装しやすくするべきだと思います。

まず、カスタムウィジェットのhtmlテンプレートで、カスタムウィジェットにカスタムビヘイビアを適用することを知らせるクラスをカスタムウィジェットに与えます。例えば

、 <input class=“custom-behaviour-widget” data-id_name=“{{ id }}" data-other_variable_name=“other_variable-value" …>

は次にように見える静的javascriptを書く：

<script> 
$(document).ready(function() { 
    $(‘.custom-behaviour-widget’).each(
     value_that_i_want = $(this).data(‘id_name’); 
     ... 
    ); 
}); 
</script>