2015-02-06 5 views
1

Expressj 내 템플릿 엔진에 dustjs 사용 4. 사용자가 양식을 채우고 xhr을 사용하여 검색 버튼을 클릭 할 때 클라이언트 쪽 템플릿을 렌더링하고 싶습니다. 모든 것은 xhr 호출에서 json을 얻는 것만 큼 괜찮아 보이지만 dust.render는 결과를 렌더링하지 않습니다. 다음은dustjs 렌더링 클라이언트 쪽 작동하지 않습니다.

 

    &ltscript id="result-template"> 
    // extra table tags removed for brevity 
    {#search_results} 
     {fname} 
     {lname} 
     {accountId} 
     {email} 
     {status} 
    {/search_results} 
    </script> 
    <div id="output"> 

는 JS 외부 파일에서 JS/JQuery와 서버 측에 XHR 호출을 수 있습니다 : 여기

페이지에있는 먼지 템플릿입니다. 나는 호출에서 결과를 렌더링하기 위해 노력하고있어 경우 성공 콜백은 내부, 기본적으로 사용자가 검색 폼에-채우고 클릭 제출 :

$(document).ready(function() { 
    $('#main').on('click', '#search-btn', function (e) { 
    e.preventDefault(); 
    $.ajax({ 
    url: '/support/search/ah', 
    type: "post", 
    headers: {token: sessionStorage.getItem('somekey')}, 
    data: {'phone': $('#mobile').val(), 
      'email': $('#email').val(), 
      'fname': $('#fname').val(), 
      'lname': $('#lname').val() 
      }, 
    success: function (data, textStatus, request) { 
     var source = $("#result-template").html(); 
     var compiled = dust.compile(source, "intro"); 
     dust.loadSource(compiled); 
     dust.render("intro", data, function(err, out) { 
     $("#output").html(out); 
     $('#search-result').dataTable(); 
     }); 
    }, 
    error: function (data, textStatus, request) { 
    // handle error 
    }) 
}) 

XHR 호출이 성공하고, 내가 볼 수있는 '데이터' 변수에는 json 값이 포함되어 있지만 dust.render를 사용하여 렌더링 할 수는 없으며 페이지가로드되거나 결과가 돌아올 때 js 오류가 발생하지 않습니다. 여기

는 XHR 호출의 JSON 결과이다

 
{"search_results":[{"fname":"Duke", "lname":"Wellington","accountId":"007","email":"duke_wellington","status":"Breathing"}]}; 

는 I는 배열 예를 교체 atakdubya.github.io에서 동일한 JSON 결과에 동일한 템플릿을 시도하고 잘 작동한다.

누군가 내가 잘못하고있는 것을 지적 할 수 있다면 그것은 대단히 감사 할 것입니다.

답변

1

브라우저에 따라 type이없는 script 태그를 사용할 수 없거나 자바 스크립트로 해석되며 더스트는 유효한 자바 스크립트가 아닙니다.

script 태그에 type="text/dust"을 추가하십시오. 이 JSFiddle 나를 위해 작동합니다.

http://jsfiddle.net/Lutr4h2e/1/

+0

좋은 눈! 고맙습니다. – user4537262

관련 문제