javascript - 从 JSON 数据动态创建 Jquery Mobile Navbar

Question

我正在尝试根据我从提供 json 数据的 Web api 获取的数据动态创建导航栏。这是代码：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 代码中工作正常，但这不是我要找的。我希望能够从数据中创建列表元素，就像 gist show 中的代码一样。任何人都可以指出我正确的方向吗？

Answer 1

为导航栏小部件编写 HTML 后，您只需调用.trigger('create')小部件：

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');

这是一个演示：http: //jsfiddle.net/Jde95/

这将触发 jQuery Mobile 来初始化小部件。

例如：

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'); 
});

请注意我是如何编写 HTML 并使用该.append()函数的。

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>