CODEWITHSUNDEEP
jquery-mobileknockout.jsknockout-mapping-plugin
Ron Harlev
Ron Harlev

Reputation: 16693

Linking to jQuery Mobile page generated with Knockout foreach doesn't work

I created a main page with jQuery Mobile in which there is a list generated with a Knockout foreach template, based on a model created with the mapping plugin. From each item in the template there is a button that should link to a page generated with another knockout foreach template.

The href of the button is populated with a custom model entry that has the '#' prefix and the page id.

Yet, non of the buttons actually open any of the pages.

See detailed example at: http://jsfiddle.net/VSVA7/

Upvotes: 0

Views: 236

Answers (1)

cwdoh
cwdoh

Reputation: 196

page should be child of <body/>. but, your page template code is wrapped with another <div> element.

if you want to use template without parent DOMElement, use KO virtual element like below

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

In this case,

<!-- 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 -->

I updated your jsfiddle and paste its Full HTML code.

<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 -->

Upvotes: 1

Related Questions