Handlebars.js, JSON 및 다중 페이지 jQuery Mobile로 동적 페이지를 얻는 방법은 무엇입니까?

내 설정은 jQuery Mobile (JQM), 다중 페이지, JSON 및 Handlebars.js입니다.Handlebars.js, JSON 및 다중 페이지 jQuery Mobile로 동적 페이지를 얻는 방법은 무엇입니까?

목록이 있습니다. 각 항목은 전체 페이지 설명으로 연결됩니다.

<div data-role="page" id="document-library"> 

<div data-role="content"> 

    <ul> 
    <div id="handlebarsDocuments">This will get replaced by handlebars.js</div> 
    <script id="TemplateDocuments" type="text/x-handlebars-template"> 

     {{#documents}} 
      <li style="float:left;padding:10px 0;width:100%;"> 
       <a href="#documentID{{documentID}}" data-transition="slide"> 
        <strong>{{documentName}}</strong> 
       </a> 
      </li> 
     {{/documents}} 

    </script> 
    </ul> 

</div>

의 URL 변경/index.html을 #의 documentID20를 로컬 호스트합니다. 좋아, 링크가 작동합니다.

문제는 documentID20에 해당하는 데이터를로드하는 페이지를 가져올 수 없습니다. JQM은 data-role = "page"div 외부에있을 경우 JavaScript를 시작하지 않습니다. 또한 여러 페이지로 구성되어 있으므로 링크를 클릭하기 전에 데이터가 있어야한다고 생각합니다.

data-role = "page"주위에 핸들 바를 래핑하면 작동하지 않습니다. JSON 파일의 모양

<div id="handlebarsDocView">This will get replaced by handlebars.js</div> 
<script id="TemplateDocView" type="text/x-handlebars-template"> 
    {{#documents}} 

     <div data-role="page" id="document{{documentID}}"> 

       <div data-role="content"> 
        {{#each_when documents "documentID" "20"}} 
         {{documentName}} 
        {{/each_when}} 
       </div> 

     </div> 

    {{/documents}} 
</script>

...

{ 
"documents": [ 
    { 
     "documentID": 20, 
     "conversationID": 100, 
     "documentName": "K1711EA1 Course", 
     "timeStamp": "2012-10-09T12:51:50Z", 
     "documentType": "documents" 
    }, 
    { 
     "documentID": 21, 
     "coversationID": 100, 
     "documentName": "K17E10CTEC Student", 
     "timeStamp": "2012-10-09T07:51:50Z", 
     "documentType": "pdf" 
    } 
] 
}

이 작동 each_when 얻을 내 handlebars.js 파일에 추가되었습니다.

Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
console.log(arguments); 
var i, result = ''; 
for(i = 0; i < list.length; ++i) 
    if(list[i][k] == v) 
     result = result + opts.fn(list[i]); 
return result; 
});

출처

2012-11-05 Anonymous

당신은 당신이 당신의 핸들을 컴파일하는 코드를 게재 할 수 있습니까? 또한이 진술은 사실이 아닙니다. 'JQM은 JavaScript가 data-role = "page"div "밖에있을 경우 JavaScript를 시작하지 않습니다. JavaScript는 페이지 역할에서 호출 할 필요가 없습니다. –

다음은 슬림 한 설치 버전입니다. https://c9.io/aaronkahlhamer/cw-mobile-dev/workspace/index-demo.html 첫 번째 항목은 클릭 할 수 있고로드됩니다. 핸들을 data-role = "page"주위로 감싸는 경우 작동하지 않습니다. 위의 예제를 참조하십시오. –

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Client Portal</title> 
<link rel="stylesheet" href="stylesheets/styles.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
<script src="js/jquery.mobile-1.2.0.js?v=6"></script> 
</head> 

<body onload="init()"> 

<script type="text/javascript" src="js/handlebars-1.0.rc.1.js"></script> 


<!-- Document Library --> 

<div data-role="page" id="document-library"> 

    <div data-role="content"> 

     <ul> 
     <div id="handlebarsDocuments">This will get replaced by handlebars.js</div> 

     <script id="TemplateDocuments" type="text/x-handlebars-template"> 

      {{#documents}} 
       <li style="float:left;padding:10px 0;width:100%;"> 
        <a href="#documentID{{documentID}}" data-transition="slide"> 
         <strong>{{documentName}}</strong> 
        </a> 
       </li> 
      {{/documents}} 

     </script> 
     </ul> 



    </div> 


</div> 

<!-- Document View--> 

<script id="Foo" type="text/x-handlebars-template"> 

    {{#documents}} 

     <div data-role="page" id="documentID{{documentID}}"> 

      Document Name {{documentName}}<br/> 
      Document ID: {{documentID}}<br/> 
      Conversation ID: {{conversationID}} 

     </div> 

    {{/documents}} 

</script> 


<script> 
// Handlebar 
var xhr; 

     function init() { 

      xhr = new XMLHttpRequest(); 
      xhr.onreadystatechange = xhr_onReadyStateChangeHandler; 
      xhr.open("GET", "json/data.json"); 
      xhr.send(null); 
     } 
     function xhr_onReadyStateChangeHandler(evt) { 
      if ((xhr.readyState === 4) && (xhr.status === 200)) { 
       var src = document.getElementById("TemplateDocuments").innerHTML; 

       var tmpl = Handlebars.compile(src); 
       var json = JSON.parse(xhr.responseText); 
       document.getElementById("handlebarsDocuments").innerHTML = tmpl(json); 


       src = $('#Foo').html(); 
       tmpl = Handlebars.compile(src); 
       $('#document-library').after(tmpl(json)); 

      } 
     } 
</script> 
</body> 
</html>

출처

2012-11-09 17:50:45 rodmjay

그것은 작동합니다! 감사! –

Handlebars.js, JSON 및 다중 페이지 jQuery Mobile로 동적 페이지를 얻는 방법은 무엇입니까?

답변

관련 문제