javascript - 从 JSON 数据动态创建 Jquery Mobile 导航栏

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 代码中工作正常，但这不是我想要的。我希望能够从数据创建列表元素，就像要点中的代码所示。有人能指出我正确的方向吗？

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() 函数的。