【问题标题】:Delete confirmation - pass data from html when modal popup is opened删除确认 - 打开模式弹出窗口时从 html 传递数据
【发布时间】:2014-09-24 15:42:21
【问题描述】:

我有一个删除确认弹出窗口,点击删除链接会打开。

我的 HTML:

<div id="deleteModal">
        <p>Are you sure ? </p>
 </div>

<ul data-bind="foreach: activList">
<li class="icn add" data-bind="click: function () { $root.deleteFileAsset('Image', $data); }">
<a data-bind="click: function () { $root.deleteImage('Image', $data); }">
<img src="../../CSS/images/DeleteCross.png" />
</a>
<b data-bind="text: title"></b>
</li>
</ul>

在我的 JS 文件中(只要我点击删除,就会调用下面的方法):

var _deleteImage = function (koList, data) {
        window.event.cancelBubble = true;
        $('#deleteModal').dialog("open");
    }

//Modal popup is opened with the below code which is in ready function
//Ready Function//
$('#deleteModal').dialog({
            autoOpen: false,
            modal: true,
            width: 628.73,
            height: 328.38,
            buttons: {
                'Submit': function () {
                    _deleteFile(koList, data);
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

//This function is called in the submit click of modal popup
_deleteFile(koList, data)
{
 // code for deletion goes here
}

现在发生的事情是,

  1. 单击删除时会打开弹出窗口。
  2. 在我点击提交的弹出窗口中,它会抛出错误:koList is úndefined'

我需要在确认删除点击时传递数据和 KoList。因为该特定数据用于删除方法。

【问题讨论】:

  • 我认为 knockoutJS 与您的问题无关。 koList 和 data 是局部变量,这就是为什么 koList 在提交中未定义的原因。您可以使用隐藏输入来存储您的值。

标签: javascript jquery knockout.js modal-dialog


【解决方案1】:

您需要将要传递的数据存储在某处,因为 koListdata 变量是本地变量。

您可以尝试在_deleteImage 中添加这一行,它使用 jQuery 将数据存储在模态的 DOM 节点上:

$('#deleteModal').data('_tmpData', { koList: koList, data: data });

并修改提交回调:

function () {
var tmpData = $(this).data('_tmpData');
_deleteFile(tmpData.koList, tmpData.data);
$(this).dialog("close");
}

【讨论】:

    猜你喜欢
    • 2015-02-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-04-10
    • 1970-01-01
    • 1970-01-01
    • 2017-02-11
    相关资源
    最近更新 更多