在 jquery 移动设备中动态创建页面，仅包含来自 websql 数据库的特定数据

Question

我有一个应用程序有一个页面，其中所有 ID 都是从 table 中选择的，特定信息位显示在 html 中。接下来我想做的是将这些元素中的每一个作为一个整体 link 本质上是第二个级别。

这个下层页面将显示绑定到该行 ID 的所有信息，是否可以以动态方式构建它？

我正在使用 jQuery 移动设备构建页面，我想使用 1 个模板并将相关的 html 元素附加到其中，并使用 ID 绑定信息填充每个。

我希望这能说得通，如有任何指导或建议，我们将不胜感激。

上面的模型代表了我想要实现的，左图显示了 table 中所有行的列表，点击其中一个，你会被带到另一个页面，只有信息那个特定的 id。

我可以为列表中的每个项目实现这个吗？

Answer 1

这是一个很好的导航示例，实现起来并不困难。

由于信息是连贯的（每个数据库行都有相同的列），只创建一个空模板（编辑：它现在基于您的PasteBin）：

<div data-role="page" id="route_details">
    <div data-role="header">
        <a data-rel="back"><i class="fa fa-arrow-left"></i></a>
        <h1 id="walkTitle"></h1>
    </div>
    <div data-role="main" class="ui-content">
        <div class="finishedRouteInfo">
            <div class="mapDetails" style="width: 100%; height: 150px;"></div>
                <div class="ui-grid-a">
                    <div class="ui-block-a home_btns no_border">
                        <div class="ui-block-a finishedDistance"><i class="fa fa-map-marker"></i></div>
                    <div class="ui-block-b"><p>Distance <br/><span id="finalDistance" class="value"></span></p></div>
                </div>
                <div class="ui-block-b home_btns">
                    <div class="ui-block-a finishedDistance"><i class="fa fa-clock-o"></i></div>
                    <div class="ui-block-b finishedDuration"><p>Duration <br/><span class="value" id="finalDuration"></span></p></div>
                </div>
                <span class="horizontalSplitter"></span>
                <div class="walkDescription"></div>
            </div>
    </div>
</div>

您的 PasteBin 中的代码无法工作，因为您正在创建多个包含具有相同 ID 的元素的页面（即：finalDistance、finalDuration）。此外，您正在创建许多用户可能永远不会看到的页面。

所以，简化你的加载函数：

var last_results = [];
$(document).on("pageinit", "#my-routes", function() {

    db.transaction(function(t){
            t.executeSql('SELECT * FROM WALKS', [], querySuccess, errorCB);
    });

    function querySuccess(t, results, Element) {
        last_results = results;
    }
});

并在显示包含路线详情的页面之前延迟 content/map 创建：

$("#route_details").on("pagecontainerbeforeshow", function()
{
    // use your DB data
    var data = last_results.rows.item(clicked_route);
    $("#walkTitle).html(data.WalkTitle);
    $(".walkDescription").html(data.WalkDescription);
    // ...create the map and fill the rest...
});

你只需要 link 每个路由到这个页面，设置 clicked_route 当 link 被点击时使用像这样的东西：

<a class="walkPage" href="#route_details" data-route="0">Route 0</a>
<a class="walkPage" href="#route_details" data-route="1">Route 1</a>
<a class="walkPage" href="#route_details" data-route="2">Route 2</a>

JavaScript:

$(document).on("click", ".walkPage") {
    clicked_route = parseInt($(this).attr("data-route"));
});

...由于您必须在两个不同的页面中显示路线图，请重构您的代码，以便您可以轻松地创建地图并将其添加到任何页面。

希望它足够清晰，可以完全实现它。

在 jquery 移动设备中动态创建页面，仅包含来自 websql 数据库的特定数据

Dynamically create page in jquery mobile, only to include specific data from websql database

javascript

html

jquery-mobile

local-storage

web-sql