jquery - json数据jquery.append格式化问题

Question

我正在尝试为移动应用程序构建一个菜单(使用 jQuery Mobile)。我有一个 .asp 页面，用于查询 SQL 来提取菜单项(目前为一个，如下所示 json[0].CompanyName )。它以 JSON 数据形式返回。我想将 SQL 中的值附加到 <ul> ID 为“mylist”。这可以工作并将文本附加到 json[0].CompanyName 内。 ，但它没有硬编码 Item 1 的格式和Item 2菜单的。为什么 CSS 的格式适用于两个硬编码菜单项，但不适用于动态菜单项？

  <div data-role="content" data-theme="b">  
     <ul id="mylist" data-role="listview" data-inset="true" data-filter="true" >
     <li><a href="item1.html" >Hard Coded Menu Item 1</a></li>
     <li><a href="item2.html" >Hard Coded Menu Item 2</a></li>
        <script type="text/javascript">
            $(document).ready(function () {
                $.getJSON("getdata.asp", function (json) {
                    // alert(json[0].CompanyName);
                    $('#mylist').append('<li><a href="#">' + json[0].CompanyName + '</a>    </li>');
                });
            });
        </script> 
     </ul>
  </div>

Answer 1

在添加到 listview 后，您必须刷新它:

        $(function () {
            $.getJSON("getdata.asp", function (json) {
                $('#mylist').append('<li><a href="#">' + json[0].CompanyName + '</a>    </li>').listview('refresh');
            });
        });

这将告诉 jQuery Mobile 重新初始化 listview 元素，以将正确的 CSS 类添加到正确的元素。

可以在此处找到文档:http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html (页面底部有一个名为更新列表的部分)

有时您会遇到不确定 listview 是否会初始化的情况，您可以使用此 if/then 来解决该问题:

var $myList = $('#myList');
if ($myList.hasClass('ui-listview')) {
    $myList.listview('refresh');
} else {
    $myList.listview();
}