zoukankan      html  css  js  c++  java
  • zmaze中am-modal-confirm按钮事件数据缓存问题

    出于性能考虑,每个 Modal 实例都存储在对应元素的 $('.am-modal').data('amui.modal') 属性中,

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

    具体例子如下:

    第一步:调用CCC('aaa')

    第二步:调用AAA(),点击确认打印 aaa

    第三部:调用CCC('bbb')

    第四步:调用AAA(),点击确认打印 aaa

    function AAA(){
        var param = $("#id").val();
        $("#promotion-confirm").modal({
            relatedTarget: this,
            closeViaDimmer:false,
            onConfirm: function(options) {
                BBB(param);
            },
            onCancel: function() {
                
            }
        });
    }
    
    function CCC(val) {
        $("#id").val(val)
    }
    
    function BBB(param) {
        console.log(param);
    }

    明显以上数据是有问题的。具体解决思路如下:

    1、通过 relatedTarget 这个钩子获取数据,如上面的演示,以该元素为桥梁获取想要的数据,针对jquery对象

    $('#confirm').modal({
        relatedTarget: this,
        onConfirm: function(options) {
            var $link = $(this.relatedTarget).prev('a');
            alert($link.data('id'));
        },
        onCancel: function() {
        }
    });

    2、每次都重新给这两个按钮事件赋值

    function Test(){
        var $confirm = $('#my-confirm');
        var confirm = $confirm.data('amui.modal');
        var onConfirm = function() {
        };
        var onCancel = function() {
        }
        if (confirm) {
            confirm.options.onConfirm =  onConfirm;
            confirm.options.onCancel =  onCancel;
            confirm.toggle(this);
        } else {
            $confirm.modal({
                relatedElement: this,
                onConfirm: onConfirm,
                onCancel: onCancel
            });
        }
    }

    3、Confirm 关闭后移除暂存的实例,再次调用时重新初始化;

    //关闭窗口的时候删除数据
    $(this).removeData('amui.modal');

    4、重写 cancel/confirm 按钮的事件处理函数

    $(function() {
        var $confirm = $('#confirm');
        var $confirmBtn = $confirm.find('[data-am-modal-confirm]');
        var $cancelBtn = $confirm.find('[data-am-modal-cancel]');
        $confirmBtn.off('click.confirm.modal.amui').on('click', function() {
        });
    
        $cancelBtn.off('click.cancel.modal.amui').on('click', function() {
        });
    });
  • 相关阅读:
    用 Python、 RabbitMQ 和 Nameko 实现微服务
    自定义Docker容器的 hostname
    ubuntu下升级R版本
    pair correlation ggpair ggmatrix
    RabbitMQ消息队列(一): Detailed Introduction 详细介绍
    ng-controller event data
    node项目换了环境node_modules各种报错
    Blast本地化
    angularjs $q、$http 处理多个异步请求
    解决angular页面值闪现问题
  • 原文地址:https://www.cnblogs.com/tianxia-09/p/8067265.html
Copyright © 2011-2022 走看看