KnockoutJS remove from JQuery mobile - jquery-mobile

Question

I would like to use the JQuery mobile listview with popup with Knockout.js
I don't know unfortunately how to refer the correct ID in the popup.
EDIT
An example can be found here http://jsfiddle.net/QQMD5/4/
The functionality itself works but unfortunately not with the popup of jQuery Mobile...
The listview is quite simple now and follows the example on the JQuery Mobile website
<div data-role="content">
<ul data-bind="foreach: lines" data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true" data-filter="true">
<li><a href="#">
<img src="https://adium.im/images/services/icon-msn.png">
<h2 data-bind="text: ItemCod"></h2>
<p data-bind="text: ItemName"><strong></strong></p>
<p></p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
Delete Item
</li>
</ul>
<div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
<h3>Delete Item?</h3>
Buy: $10.99
Cancel
</div>
</div>
While the KnockoutJS part is now only client-side as
self.removeLine = function(line) { self.lines.remove(line); }
I imagine the point here is that it doesn't recognize the correct line to be picked.
Thank you

Answer 1

There are a few problems I see in your code which may be copy paste errors or may be breaking your stuff -
You open the anchor tag but never close it
<li>
<a href="#">
<img src="https://adium.im/images/services/icon-msn.png">
<h2 data-bind="text: ItemCod"></h2>
<p data-bind="text: ItemName"><strong></strong></p>
<p></p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
<button data-bind="click: setItemToRemove">Delete Item</button>
</a>
</li>
And if you are going to set an item to be deleted, pass that item into an observable and that way when you call removeLine it passes the proper object back to the view model to remove -
self.itemToRemove = ko.observable();
self.setItemToRemove = function(line) { self.itemToRemove(line); }
self.removeLine = function(line) { self.lines.remove(line); }
And make your pop or w/e display only when itemToRemove has a value -
<div data-role="popup" data-bind="with: itemToRemove">
<h3>Delete Item?</h3>
<button href="#" data-bind="click: $root.removeLine" >Buy: $10.99</button>
Cancel
</div>
Updated
You had a bunch of syntax errors in your fiddle -
http://jsfiddle.net/QQMD5/3/