Jquery Mobile에서 동적으로 페이지 생성 및 추가

Question

위젯 ID [s1, s2, s3 ... 등]이 포함 된 배열이 있습니다. 이 배열은 때로는 5 개의 ID와 2 개의 ID를 가질 수있는 다른 시간을 가질 수 있습니다. 따라서 기본적으로이 배열을 반복하면서 배열의 모든 ID에 대해 동적으로 페이지를 만들 수 있기를 원합니다.

이것은 모든 ID에 대해 동적으로 만들 수있는 페이지의 기본 형식입니다.

<!--id should eqqual id# like s1,s2,s3,etc --> 

    <div data-role="page" id="page5"> 

       <div data-role="header" data-position="fixed"> 
       <a data-iconpos="notext" href="#" data-role="button" data-icon="flat-menu"></a> 
        <h1>BasketBall Fanatico</h1> 
        <a data-iconpos="notext" href ="#page2" data-role="button" data-icon="home" title="Home">Home</a> 
       </div> 

        <div data-role="content"> 

        <ul data-role="listview" data-inset="true"> 

        <li data-role="list-divider" data-theme="b">Raptors Score</li> 
        <li><h2>0</h2></li> 
        </ul> 
        </div> 


      </div> 

이 난 배열의 식별자를 반복하고 페이지 dynamically.This을 추가하려고하고있는 루프 내가 내 결과를 달성하기 위해 시도했지만 실패한 것입니다.

for(var i=0; i<widgetId.length; i++){ 

      var makePage = $("<div data-role='page' id="+widgetId[i]+"> 
       <div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#' data-role='button' data-icon='flat-menu'></a> 
       <h1>BasketBall Fanatico</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div> 
       <div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='b'>Raptors Score</li> 
       <li><h2>0</h2></li></ul></div></div>"); 

      makePage.appendTo($mobile.pageContainer); 

      } 

나는 크롬 콘솔 창을 사용하고 그 날 이야기 : catch되지 않은 구문 에러 : < 토큰 예기치. 그러나 내 코드를 보면 오류가 어디에 있는지 알 수 없습니다. 또한 동적으로 페이지를 만들기위한 나의 접근법이 맞습니까? 모든 답변은 높이 평가됩니다.

저는 jquery와 web dev에 익숙하므로 일반적으로 사과드립니다.

Answer 1

여러 번의 시행 착오를 거쳐 오류를 파악했습니다. 오류의 원인은 다른 줄에 페이지 구조가있는 것 같습니다. 예를 들어, 모든 것이 같은 줄에 있다면, 이렇게 잘 작동합니다.

for(var i=0; i<widgetId.length; i++){ 

      var makePage = $("<div data-role='page' id="+widgetId[i]+"><div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#' data-role='button'data-icon='flat-menu'></a> <h1>BasketBall Fanatico</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div> <div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='b'>Raptors Score</li><li><h2>0</h2></li></ul></div></div>"); 

      makePage.appendTo($.mobile.pageContainer); 

      } 

나는 그것이 무엇인지는 모르지만 모든 것이 온라인 상태 일 때 제대로 작동하는 것 같습니다. 앞으로도 비슷한 오류가 있거나 페이지를 동적으로 생성하려고하는 사용자에게 도움이되기를 바랍니다.

Answer 2

동적으로 제품을 경매 페이지에 추가해야하고 다음 코드를 사용했습니다. 문제는 페이지에 표시 할 제품의 수를 정확하게 알지 못했기 때문입니다.

/* creates a parent div for each product that will be displayed on the page 
* a picture is displayed in the parent div then a child div is created 
* in order to display product info and a bid button which happens in another function*/ 
function getProductHTML(prod, id) 
{//create the parent div 
    var html = document.createElement('div'); 
    html.className = 'singleProduct'; 
    html.id = id; 
    //append the picture to the parent div 
    html.appendChild(addElement('img', ['SRC', prod.pic, 'ALT', prod.name, "height", "400px", 'class', 'pic'])); 
    //create div for product title 
    var title = document.createElement('div'); 
    title.className = 'prodTitle'; 
    title.innerHTML = '<b>'+prod.name + "<b><BR>" ; 
    html.appendChild(title); 
    html.appendChild(writeProductInfo(prod));//this creates another child div for the product data 
    return html; 
} 

대신 번호 : 여기

//get the html for each item and write it to the page 
for(var i = 0; i < productList.length; i++) 
    $("#fullProductList").append(getProductHTML(productList[i], i)); 

가 getProductHTML입니다 :

/* takes element type and all options for element returns html string for the element 
* Arg1 is the type of element to create 
* Options is an array/list of key-value pairs. The even numbered objects in the array 
* will represent the attribute name, the odd elements will be the value of the attribute*/ 
function addElement(ELEMENT, options) 
{ 
    var element = document.createElement(ELEMENT); //create the element 

    var i = 0;//iterate through the array and set each element 
    while(i < options.length) 
     element.setAttribute(options[i++], options[i++]); 
    return element; 
} 

그런 다음 내 인덱스 파일에 나는이 'fullProductList은'모든 div의 제품을 포함 개최 사업부입니다 않는다 div 자신은 각 제품과 함께 제공된 DB의 ID를 사용했습니다. writeProductInfo에 대한 코드는 포함시키지 않았습니다.이 코드를 사용하면 어떻게 작동하는지 확인할 수 있기 때문입니다. 나는 당신의 상황이 내가 만난 상황과 다를 것이지만 이것이 도움이되기를 바랍니다.