2013-10-14 2 views
5

장고보기에서 만든 코드의 HTML 청크를 표시하는 동안 문제가 있습니다. 다음과 같은 현상이 발생합니다.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) 

지금까지는 그렇게 좋았습니다.

books_description = {}; 
{% for book, book_desc in bd.items %} 
     books_description["{{ book }}"] = "{{ book_desc|escapenewline }}" 
{% endfor %} 
: 내 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로 문자열을 보여

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의 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> 

문제는 그 인용 부호입니다. 어떻게 거기에 나타 났습니까? 어떻게 내가 그 (것)들을 제거 할 수 있고 왜 첫번째 장소에서 그 (것)들이 거기 두는가?

미리 감사드립니다. 불명확 한 점이 있으면 언제든지 물어보십시오.

UPDATE은 : 음, modal_info div의 텍스트가 배경으로는 같은 색이었다 모두 .. 후 빈 아니라고 밝혀졌습니다. 사과, 그게 내 바보 같았 어. 그러나 문제는 지속됩니다. 어디에서 볼 수 :

<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); 

하지만 결과

Clockwork Orange 
Dystopian fiction 

yadayadayadayada 

내가 대신 리터럴 HTML을 참조 동일합니다. 어떤 아이디어를 브라우저가 문자열을 html 코드로 해석하고 리터럴 문자열로 해석하지 않게하는 방법.

답변

9

문제가 해결되었습니다. 내가 생각했던 것만 큼 극적이지 않았다. 너무 장고 해당 DOM 객체를 생성하는 '& LT'이 페이지에 대한 올바른 출력 결과 '&된다'

하지만 무능력 '>'예 '<'로 HTML 토큰 변환되었음을 일어나는 .

수정 :

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

이 걸 렸어요. 사람이 비슷한 문제를 통해 오는 경우 여기 autoescaping

autoescape filter

에 대한 몇 가지 인텔입니다