Question

I’m working on a mobile website using jQuery Mobile and knockout.js. I have a (kind of) complex scenario with jQuery Mobile’s popup and listview and knockout data binding inside the popup div, and I can’t get it working.

I have a nested list of alarms as shown below. For each day, it creates a list-divider row. Then inside each day, each alarm has a row.

<ul id="alarmslist" data-bind="foreach: days" data-role="listview">
    <li data-role="list-divider"><span data-bind="text: date"></span></li>
    <!-- ko foreach: alarms1 -->
    <li>
        <a href="#popupBasic" data-rel="popup"><span data-bind="text: alarmName"></span></a>
        <section id="popupBasic" data-role="popup" data-corners="true" data-history="false" data-overlay-theme="a">
            <a href="#" class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="c">Close</a>
            <ul data-role="listview" data-inset="true">
                <li data-role="divider" data-theme="a">Alarm Options</li>
                <li><section class="alarmDetail"><span data-bind="text: alarmID"></span></section></li>
                <li><a href="#">Go to Data</a></li>
                <li><a href="#">Acknowledge</a></li>
            </ul>
        </section>
    </li>
    <!-- /ko -->
</ul>

I’m needing to attach the popup widget to the alarm row such that when the li row is clicked the popup appears with a list of option for that row. This should be available for each row. The options for each row will depend on the alarmID key.

This is where the problem occurs. I’m trying to data bind the alarmID field (which is part of the alarms1 array) so that the next operation knows what to do with the correct alarm. However, I get a knockout error because it cannot find the alarmID (). I guess jQuery Mobile is creating the popup section at the bottom of the DOM, well below where my view and viewmodel are defined for the knockout piece.

Anyway, does anyone have any ideas how to “fix” this situation? Or, know of a work-around? Or, even some other solution?

Answer 1

I also posted this question on the Knockout.js Google group and received an answer that helped me out. It’s at https://groups.google.com/forum/?fromgroups=#!topic/knockoutjs/xQYZrxQ6Jsg. Thanks.