jQuery에서 JSON 및 HTML 템플릿 처리

HTML을 자바 스크립트 문자열에 잠그지 않고 템플릿 HTML 및 JSON을 어떻게 처리합니까?jQuery에서 JSON 및 HTML 템플릿 처리

JSON 값을 HTML로 보간하여 많은 동적 컨텐츠를 제공하는 ajax 지원 사이트가 있습니다. 이 모든 것이 잘 작동합니다.

하지만 자바 스크립트를 통해 상당량의 HTML이 있다는 의미입니다. 예를 들어 는 :

var template = "<div>Foo: {bar}</div><div>Blah: {vtha}</div>";   
template.interpolate({bar:"bar",blah:"vtha"});

나는 공정한 조금이 아래로 잘라 - 내 동적 요소 중 일부는 꽤 HTML을 많이하고 무슨 많다.

저는 jQuery를 사용하고 있으며 레일즈를 기반으로 구축하고 있습니다. 따라서 어느 프레임 워크에도 똑똑한 것이 있으면 좋을 것입니다.

참고로, 위에서 사용 된 문자열 보간 기능은 다음과 같습니다

String.prototype.interpolate = function (o) { 
    return this.replace(/{([^{}]*)}/g, 
     function (a, b) { 
      var r = o[b]; 
      return typeof r === 'string' || typeof r === 'number' ? r : a; 
     } 
    ); 
};

출처

2010-04-19 Toby Hede

그래서 ... 문제는 무엇인가? 자바 스크립트 문자열에 HTML을 잠그지 않고이 작업을 수행하는 방법을 묻고 있습니까? –

그 보간은 잠재적 인 보안 문제입니다. HTML 이스케이프 텍스트 문자열이 아니기 때문에 페이지를 작성하는 신뢰할 수없는 입력은 페이지의 보안 컨텍스트에 자바 스크립트를 포함한 마크 업을 삽입 할 수 있습니다. 클라이언트 측 XSS 위험이 있습니다. – bobince

@peter : 내 q보다 훨씬 간결하다. –

내가 확실히 접근 "로드 필요"사용합니다.

HTML, 데이터 등으로 완성 된 아약스로로드 할 수있는 작은 위젯을 빌드하십시오. jquery의 load 함수를 사용하십시오.

$('#wrapper').load('/widgets/foobar/')

그리고 필요한 모든 요소를 서버에 생성하십시오. 각 위젯에 대해 더 많은 데이터가로드됩니다. 그러나 클라이언트 측에서 생성 할 필요는 없습니다. 나는이 부분에 무게를 두는 것이 좋다고 말할 것입니다. 클라이언트가 javascrtipt에서 파싱 된 HTML 대신 이미 파싱 된 html을 추가하는 것이 더 쉬울 것이기 때문입니다.

출처

2010-04-19 14:01:50 fredrik

Distal templates을 사용하여 템플릿을 HTML로 정의 할 수 있습니까?

출처

2012-02-19 13:01:01

HTML 템플릿 코드를 JavaScript 및 JavaScript로 유지하려면 다음과 같이하십시오.

자바 스크립트 :

$(document).ready(function() { var template = $('#template-example').html(); template.interpolate({bar:"bar",blah:"vtha"}); });

HTML :

<div id="template-example" style="display:none;"> <div>Foo: {bar}</div><div>Blah: {vtha}</div> </div>

출처

2017-12-14 20:37:34 Drew

jQuery에서 JSON 및 HTML 템플릿 처리

답변

관련 문제