jquery-mobile - 链接到使用 Knockout foreach 生成的 jQuery Mobile 页面不起作用

Question

我使用 jQuery Mobile 创建了一个主页，其中foreach基于使用映射插件创建的模型，使用 Knockout 模板生成了一个列表。模板中的每个项目都有一个按钮，该按钮应链接到使用另一个剔除foreach模板生成的页面。

按钮的href填充有自定义模型条目，该条目具有“#”前缀和页面 ID。

然而，实际上没有一个按钮可以打开任何页面。

请参阅以下详细示例：http: //jsfiddle.net/VSVA7/

Answer 1

页面应该是 <body/> 的子级。但是，您的页面模板代码是用另一个 <div> 元素包装的。

如果要使用没有父 DOMElement 的模板，请使用 KO 虚拟元素，如下所示

<!-- ko binding: binding_context -->
    TEMPLATE
<!-- /ko -->

在这种情况下，

<!-- ko foreach: Questions -->
<div data-role="page" data-bind="attr: { id: Id }" data-add-back-btn="true">
    <div data-role="content" data-bind="html: Id">
    </div>
</div>
<!-- /ko -->    

我更新了您的jsfiddle并粘贴了其完整的 HTML 代码。

<div data-role="page" id="page1">
    <div data-role="header" data-theme="b">
        <h1>Main Page</h1>
    </div>
    <div data-role="content"  style="width:100%;">
        <ul data-role="listview" data-bind="foreach: Questions">
            <li class="listItem">
                <a data-bind="attr: { href: IdUrl }, text: Subject" ></a>
            </li>
        </ul>
    </div>
</div>


<!-- ko foreach: Questions -->
<div data-role="page" data-bind="attr: { id: Id }" data-add-back-btn="true">
    <div data-role="header" data-theme="b">
        <h1 data-bind="text: Subject"></h1>
    </div>
    <div data-role="content" data-bind="html: Id">
    </div>
</div>
<!-- /ko -->