22

Django ビューで作成されたコードの html チャンクを表示しようとしているときに問題が発生しました。これが何が起こっているかです。

私の見解では、ユーザーのアクションに従って非表示/表示する一連の本の説明をテンプレートに渡そうとしています。これらの説明は、サーバー上の html ファイルに保存されます。

def my_view()
     #loop through the list of books, read their corresponding a html file, and parse it to fill in the book details
     #code, code, code...
     #take the resulting string, append it on books description array, log it and send it to template
     logger.debug(books_description["Clockwork orange"])
     return render_to_response("my_template.html", {'bd': books_description}, context_thingy)

ここまでは順調ですね。私のログには、html 文字列が正確に表示されます。

 <div id="modal_book_name">Clockwork orange</div>
 <div id="modal_book_genre">Dystopian fiction</div>
 <br>
 <div id="modal_book_desc">yadayadayadayada</div>

ここで、HTML コードにコンテンツを配置したくないので、本の説明を次のように JavaScript 変数に読み込みます。

 books_description = {};
 {% for book, book_desc in bd.items %}
       books_description["{{ book }}"] = "{{ book_desc|escapenewline }}"
 {% endfor %}

escapenewline は、JavaScript が文字列の内容全体を正しく解釈できるように、すべての行の末尾に \ を置くフィルターです。

最後に、ユーザーが本の説明を確認したい場合、クリックするだけでモーダルが本の説明とともに表示されます。このために私は持っています：

    console.log(books_description[book_name]);
    $("#modal_info").html(books_description[book_name]);

繰り返しますが、この console.log ではすべて問題ないようです。

<div id="modal_book_name">Clockwork orange</div><div id="modal_book_genre">Dystopian fiction</div><br><div id="modal_book_desc">yadayadayadayada</div>

残念ながら、ページを開くと modal_info div は空です。ブラウザーの開発者ツールを開いて、その div の html を確認すると、次のように表示されます。

 <div id="modal_info">
      "<div id="modal_book_name">Clockwork orange</div><div id="modal_book_genre">Dystopian fiction</div><br><div id="modal_book_desc">yadayadayadayada</div>"
 </div>

問題はそれらの引用符にあります。彼らはどうやってそこに現れたのですか？どうすればそれらを取り除くことができますか? また、そもそもなぜそこに配置されたのですか?

前もって感謝します。ご不明な点がございましたら、お気軽にお問い合わせください。

更新:まあ、結局のところ、modal_info div は空ではなかったことがわかりました..テキストは背景と同じ色だけでした。すみません、それは私の愚かでした。しかし、問題は解決しません。私が見るべき場所：

 Clockwork Orange
 Dystopian fiction

 yadayadayadayada

代わりに、リテラル html が表示されます。

 <div id="modal_book_name">Clockwork orange</div><div id="modal_book_genre">Dystopian fiction</div><br><div id="modal_book_desc">yadayadayadayada</div>

parseHTML 関数を使用して、文字列を HTML に解析しようとしました。

  var book_desc = $.parseHTML(books_description[book_name]);
  $("#modal_info").html(book_desc);

しかし、結果は同じです。ブラウザに文字列をリテラル文字列ではなくhtmlコードとして解釈させる方法

4

2 に答える 2

31

問題が解決しました。思ったほどドラマチックじゃなかった たまたま、django が '<' や '>' などの html トークンを '<' や '>' に変換していました。

これにより、ページには正しい出力が表示されましたが、対応する DOM オブジェクトを作成できませんでした。

修正：

 {% autoescape off %}
    {% for book, book_desc in bd.items %}
       books_description["{{ book }}"] = "{{ book_desc|escapenewline }}"
    {% endfor %}
 {% endautoescape %}

少し時間がかかりました。誰かが同様の問題に遭遇した場合、ここに自動エスケープに関する情報があります

自動エスケープ フィルタ

于 2013-10-15T10:14:56.383 に答える