Question

我有一个D3功能，可以在页面上创建列表项。我希望它们由JQuery UI mobile设计，但是当我以多种方式调用该函数时，它们从未被设计过。

D3 / JS：

var sampdata = [{itemname: "Placeholder0", numvalue: "$000,000"},
    {itemname: "Placeholder1", numvalue: "$543,600"},
    {itemname: "Placeholder2", numvalue: "$9,200"},
    {itemname: "Placeholder3", numvalue: "$5,100"}];

setupgui: function()
    {
        d3.select("#SampcoISrevenues").selectAll("li")
                .data(sampdata)
                .enter()
                .append("li")
                .text(function (d){return d.itemname;})
                .append("span")
                .attr("class", "right")
                .text(function (d){return d.numvalue;});
    }

此函数选择保留的屏幕部分，然后从“sampdata”添加列表项。 HTML：

<body onload="Samplegui.setupgui()"> 
        <div data-role="content">
             <ul data-role="listview" data-divider-theme="a" id="SampcoISrevenues">
             </ul>
        </div>
</body>

我按顺序引用了D3库，我的index.js和JQuery（JQmobile.css / .js，JQ.js）：

    <link rel="stylesheet" href="../../css/jquery.mobile-1.4.2.css">
    <link rel="stylesheet" href="../../css/index.css">
    <script src="../../js/jquery-1.11.1.js"></script>
    <script src="../../js/jquery.mobile-1.4.2.js"></script>
    <script src="../../js/d3.js"></script>
    <script src="../../js/yourdata.js"></script>

虽然D3功能是立即运行的，但JQuery mobile并没有设计它。我想要它的风格，因为它非常适合移动。

Answer 1

根据jQuery Mobile Docs for List Views：

更新列表

如果您将项目添加到列表视图，则需要在其上调用refresh()方法来更新样式并创建添加的任何嵌套列表。

在更新d3代码中的列表后尝试调用$('#SampcoISrevenues').listview('refresh')。

Answer 2

您可以使用JQuery的.ready（）来运行该函数：

$(document).ready(Samplegui.setupgui());

这是我尝试过的，但问题是我在加载实际的HTML代码之前运行了D3函数，因此D3找不到合适的ID /标签。坚持

   `<script>
        $(document).ready(Samplegui.setupgui());
    </script>`

页面底部的

解决了它。

应用JQuery Mobile的风格来实现功能

2 个答案: