0

我想使用带有 Knockout.js 弹出窗口的 JQuery 移动列表视图我不知道如何在弹出窗口中引用正确的 ID。

编辑可以在这里找到一个示例http://jsfiddle.net/QQMD5/4/ 该功能本身可以工作，但不幸的是 jQuery Mobile 的弹出窗口没有...

现在列表视图非常简单，并遵循 JQuery Mobile 网站上的示例

<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>
            <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Delete Item</a>
        </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>
        <a href="#" data-bind="click: $root.removeLine" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
        <a href="index.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
    </div>
</div>

虽然 KnockoutJS 部分现在只是客户端

self.removeLine = function(line) { self.lines.remove(line); }

我想这里的重点是它无法识别要选择的正确线。

谢谢

4

1 回答 1

1

我在您的代码中看到了一些问题，这些问题可能是复制粘贴错误或可能会破坏您的东西 -

您打开锚标记但从不关闭它

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

如果您要设置要删除的项目，请将该项目传递给可观察对象，这样当您调用 removeLine 时，它​​会将正确的对象传递回视图模型以删除 -

self.itemToRemove = ko.observable();
self.setItemToRemove = function(line) { self.itemToRemove(line); }
self.removeLine = function(line) { self.lines.remove(line); }

并且仅当 itemToRemove 具有值时才显示 pop 或 w/e -

<div data-role="popup" data-bind="with: itemToRemove">
    <h3>Delete Item?</h3>
    <button href="#" data-bind="click: $root.removeLine" >Buy: $10.99</button>
    <a href="index.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
</div>

更新

您的小提琴中有一堆语法错误-

http://jsfiddle.net/QQMD5/3/

于 2013-10-22T14:53:05.850 回答