djangoテンプレート：特定のタグの値に等しいキーに基づいて辞書の値を取得する

Question

私はウェブ開発には新しく、これは愚かなアプローチかもしれませんが、これを行う良い方法を考えることはできません。 views.pyでは、この方法は、次の形式でテンプレートにsniffer_apsという名前の辞書を返します：私は、すべてのデバイスを一覧表示し、ドロップダウンリストを持っているテンプレートでは

sniffer_aps = {device1:[ap1, ap2], device2:[ap3, ap4, ap5], ......} 

を（デバイス1、デバイス2、......） 。

すべてのAPは、ドロップダウンリストで選択されたデバイスに属しています。選択したデバイスに応じてフィールドを動的に調整したいのですが、実際には機能しません。

ドロップダウンリストのコードは次のとおりです。

<select onchange="refresh(this.value)" id="sniffer_list"> 
      {% for sniffer_ap in sniffer_aps %} 
       <option value={{ sniffer_ap }}>{{ sniffer_ap.plug_ip }}</option> 
      {% endfor %} 
</select> 

私の質問はどのようにドロップダウンリストで選択したオプションに基づいて、APSを示しフィールドの値けどIループことができるということですか？

私のアプローチは、ドロップダウンリストの "onchange"イベントを検出するためにjavascriptを使用し、それに応じてすべてのAPをリストするフィールドの値を変更してから、フィールドの値を取得してキーとして扱います辞書の

function refresh(key) { 
     $('.router').attr('value') = key; 
} 

apsのフィールドには、問題がある場所が表示されます。

<select multiple="multiple" size="6"> 
       {% for router in sniffer_aps[this.value] %} 
        <option class="router" value="">{{ router }}</option> 
       {% endfor %} 
</select> 

私のアプローチを修正し、または誰かがより良い方法を提供できるかどうください：私はこのような何かを達成しようとしています。どうもありがとう。

Answer 1

サーバサイドのコード（Djangoのテンプレートエンジン）とクライアントサイドのコード（onchangeハンドラに使用するJavascriptコード）を混同しているので、ここで問題が発生しています。生成されたHTMLがクライアントに配信される前に、サーバー側のコードがサーバー上で実行されるため、クライアント側のJavascriptとテンプレートロジックの間に相互作用はありません。

あなたがアプリケーションを一覧表示フィールドの値を更新するために、Javascriptとonchangeイベントを使用するために正しいです - あなたははフォームを送信し、ときに新しい要求はDjangoでHTMLを変更することで、サーバー上でこれを行うことができますこれは新しいWebページの読み込みを必要とし、Javascriptで行うのと同じくらい速く、またはユーザーフレンドリーではありません。

1. あなたのDjangoのビュークラスでJSONへの辞書の変換：あなたのテンプレートコード内でJavaScriptオブジェクトとしてJSONをOutputing

   import json 
   ... 
   sniffer_app_json = json.dumps(sniffer_apps) 
   

2. ：

   私がすることで、この近づくだろう

   var snifferApps = {{ sniffer_apps_json }}; 
   

3. JavaScriptを使用してアプリフィールドを更新すると、 sのデータです。 StackOverflowにmanyquestionsaddressingthisがあります。このような操作をはるかに簡単にするため、jQueryの使用を検討することもできます。