JSON 데이터에서 Jquery Mobile Navbar를 동적으로 작성하십시오.

Question

json 데이터를 제공하는 웹 API에서 데이터를 가져 와서 동적으로 navbar를 작성하려고합니다. 여기 코드는 다음과 같습니다 https://gist.github.com/2962277 내가 사용하는 경우 :

<div data-role="navbar"> 
     <ul> 
     <li><a href="a.html">One</a></li> 
     <li><a href="b.html">Two</a></li> 
    </ul> 
    </div> 

직접 HTML 코드는 잘 작동하지만,이 메신저를 찾는 것이 아니다. 나는 요지에있는 코드처럼 데이터에서 목록 요소를 만들 수 있기를 원합니다. 누구든지 올바른 방향으로 나를 가리킬 수 있습니까?

당신이 네비게이션 바에 위젯에 대한 귀하의 HTML을 섞어서하면

Answer 1

, 당신은 단순히 위젯에 .trigger('create') 전화 : 이것은 위젯을 초기화하기 위해 jQuery를 모바일 트리거 http://jsfiddle.net/Jde95/

: 여기

var myNavbar = $('<div data-role="navbar"><ul><li><a href="a.html">One</a></li><li><a href="b.html">Two</a></li></ul></div>'); 
$('#some-container').append(myNavbar).trigger('create'); 

는 데모입니다. 예를 들어

: 나는 HTML을 날조하고 .append() 기능을 사용하는 방법

var url = "http://23.21.128.153:3000/regions.json";var jsonresults; 
$.getJSON(url,function(data){ 
    var output = []; 
    $.each(jsonresults, function(i,v){ 
     output.push('<li><a href="' + jsonresults[i].link + '">' + jsonresults[i].name + '</a></li>'); 
    }); 
    $('#main-content').append('<div data-role="navbar">' + output.join('') + '</div>').trigger('create'); 
}); 

알 수 있습니다.

Answer 2

저도 같은 문제가 있었다 (나는 인출 된 데이터에 따라 내 네비게이션 바 모든 시간을 재생하고있어) 내 솔루션은 다음과 같은있다 :

var navBar = '<div id="invNavBarAction" data-role="navbar" data-iconpos="left"><ul>'; 
navBar += '<li>MANY LINES AS YOU NEED</li>'; 
navBar += '</ul></div>'; 
$('#invNavBarAction').remove(); 
$('#invNavBarContainer').append($(navBar)); 
$('#invNavBarAction').navbar(); 

HTML :

<div id="invNavBarContainer"> 
    <div id="invNavBarAction" data-role="navbar" data-iconpos="left"></div> 
</div>