onConfirm/onCancel 会保存第一次运行 Modal 时候的数据,导致在某些场景不能按照预期工作,我的解决运用解决方案?

在是用model,发现,遍历的节点ID是拿取是有点抓狂的,然后通过下列代码得到解决方案!尝试可以满足获取想要的ID,不知道是否可以当作参考?

对描述:

出于性能考虑,每个 Modal 实例都存储在对应元素的 $('.am-modal').data('amui.modal') 属性中,onConfirm/onCancel 会保存第一次运行 Modal 时候的数据,导致在某些场景不能按照预期工作(#274)。2.1 中做了一些处理,但并不是很如意,大家有更好的方案可以提供给我们。

html代码如下:css和js请自行下载引用

 

<!DOCTYPE html>
<html>
<head>
    <title></title>

<link rel="stylesheet" type="text/css" href="assets/css/amazeui.min.css">
</head>
<body>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">
          ui amaze modal
        </div>
        <div class="am-modal-bd">
            你确定要删除吗?
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>
                取消
            </span>
            <span class="am-modal-btn" data-am-modal-confirm>
                确定
            </span>
        </div>
    </div>
</div>
<!-- ceshi -->
<ul id="list">
    <li id="li-1">
        <a href="">
            删除-1
        </a>
    </li>
    <li id="li-2">
        <a href="">
            删除-2
        </a>
    </li>
    <li id="li-3">
        <a href="">
            删除-3
        </a>
    </li>
    <li id="li-4">
        <a href="">
            删除-4
        </a>
    </li>
    <li id="li-5">
        <a href="">
            删除-5
        </a>
    </li>
</ul>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script>
    $(function() {
        $('#list').find('a').on('click',
        function(e) {
            e.preventDefault();
            var id = $(this).parent('li').attr('id');
            var $confirm = $('#my-confirm');

            /* my add code#1 start */
                // 因为文档中model节点只有一个,那么可以自己给他添加自定义属性
                // 然后去拿这个自定义元素的值
                $confirm[0].dataset.id = id; //dataset 方法
                // $confirm[0].setAttribute("data-id",id);  //setAttribute方法
                console.log($confirm[0]);
            /* my add code#1 end */

            var confirm = $confirm.data('am.modal');
            var onConfirm = function() {

                /* my add code#2 start */
                    // console.log(this.$element);
                    var id = this.$element[0].dataset.id;
                    // var id=this.$element[0].getAttribute("data-id");
                /* my add code#2 end */
                
                console.log('你确定删除 ' + id);
            };

            var onCancel = function() {
                console.log('你不想删除 ' + id);
            }

            if (confirm) {
                confirm.options.onConfirm = onConfirm;
                confirm.options.onCancel = onCancel;
                confirm.toggle(this);
            } else {
                $confirm.modal({
                    relatedElement: this,
                    onConfirm: onConfirm,
                    onCancel: onCancel
                });
            }
        });
    });
</script>

</body>
</html>

code_model_id.png
已邀请:

meeleem

赞同来自:

定义一个js变量. 点击删除的时候把id赋值进去, 在onconfirm的回调中, 使用这个js变量即可.

要回复问题请先登录注册