django在自定義小部件中的動態javascript

我在自定義小部件的呈現html頁面中有一個javascript代碼。我想移動js代碼來分離js文件。django在自定義小部件中的動態javascript

但是，它必須是動態而非靜態媒體文件。

我寫了一個自定義部件：

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'放在頁面底部。

謝謝。

來源

2017-08-17 nasiajai

你有什麼問題嗎？ –

@JahongirRahmonov我想將app/custom_widget.html中的javascript代碼移動到app/my.js文件中。 – nasiajai

兩個選項：

你可以把變量聲明的列表在您的模板腳本標籤，確保您導入靜態的JavaScript之前，他們宣稱。然後，您的靜態JavaScript引用它知道由服務器適當設置的變量值。
將您的動態值放入HTML元素的數據屬性中。然後編寫您的靜態JavaScript來查找基於它所操作的適當的服務器設置數據。

你在你的示例代碼做什麼看起來很複雜，我不知道它需要。如果我的解釋正確，那麼您正試圖確保在插入自定義小部件時，自定義JavaScript行爲將應用於該自定義小部件。

我認爲第二個選項更適合這種行爲，你應該使用jQuery來儘可能簡單地實現它。首先，在你的自定義小部件的html模板中，給你的自定義小部件一個類，讓你的javascript知道應用自定義行爲。

例如， <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>

來源

2017-08-17 14:42:53

謝謝你的回答。在第一個選項中，我可以問你「確保在導入靜態JavaScript之前聲明它們的含義」的含義嗎？如果可能，我想知道示例代碼或另一個stackoverflow問題和文章。謝謝你。 – nasiajai

對不起，模糊！我編輯了答案，以添加與您看起來像要做的更直接相關的示例代碼。 –

我真的很感激你的回答。其實，我想在底部導入「jquery.js」，並且在頁面中間使用$變量時遇到了問題。似乎沒有辦法將「jquery.js」放在底部。如果我把「jquery.js」聲明在頂部。我相信這沒有問題。 – nasiajai

django在自定義小部件中的動態javascript

回答

相關問題