以编程方式选择操作表会引发错误

Posted 2023-05-07

【中文标题】以编程方式选择操作表会引发错误

【英文标题】：Programmatically selecting actionsheet throws error

【发布时间】：2014-02-28 19:18:49

【问题描述】：

我正在使用 uitest.js（内置 Jasmine.js）来测试我们的 Kendo UI Mobile 应用程序。我正在显示一个操作表并以编程方式选择选项。这在应用程序中可以正常工作，但会引发测试失败的错误。

我正在使用这样的操作表：

<ul data-role="actionsheet" id="marketplace-price-actions" >
    <li class="km-actionsheet-title">Select Price</li>
    <li><a href="#" data-action="setPriceFilter('3')">$$$</a></li>
    <li><a href="#" data-action="setPriceFilter('2')">$$</a></li>
    <li><a href="#" data-action="setPriceFilter('1')">$</a></li>
</ul>

在我的规范中，我选择了如下选项之一：

$("#marketplace-price-actions li a").eq(2).mousedown().mouseup();

这可行，但会引发以下错误：

TypeError: "undefined is not a function"

我创建了一个 jsfiddle，在 http://jsfiddle.net/zkent/DD6vj/2/ 上显示它。请务必打开控制台。

编辑根据选择的答案，错误来自将值传递给函数。我选择创建单独的回调。见http://jsfiddle.net/zkent/DD6vj/4/。

【问题讨论】：

顺便说一句，我正在使用 .mousedown().mouseup() 因为显然 kendoui 正在捕获 .click() 并以不同方式处理它。

我们究竟在控制台中寻找什么？

控制台显示错误

可能你链接错了demo；这个只显示一个按钮

我已经更新了上面的链接。谢谢。

【参考方案1】：

看起来您不应该将参数传递给您的操作。我不确定为什么要这样实现，但这会导致您的错误（如果您只是单击它也会发生这种情况，因此它与 Jasmine 无关）。

据我所知，你有三个选择：

为每个项目使用单独的回调 修改 ActionSheet 源代码以将单击的元素提供给您的操作 对传递的值使用闭包并返回处理程序

如果您只需要传递一个值但又希望避免由于多个处理程序而导致代码重复，那么选项 3 似乎是最佳解决方案。 请注意，我根本没有测试过以下解决方案，因此使用风险自负。

对于选项 #2，类似的方法可能有效：

kendo.mobile.ui.ActionSheet.fn._click = (function (click) 
    return function (e) 
        if (e.isDefaultPrevented()) 
            return;
        

        var action = $(e.currentTarget).data("action");

        if (action) 
            kendo.getter(action)(window)(
                target: this.target,
                context: this.context,
                element: e.currentTarget // pass in the element that was clicked on 
            );
        

        e.preventDefault();
        this.close();
    
)(kendo.mobile.ui.ActionSheet.fn._click);

这样你至少知道点击了哪个元素，如果你愿意，你可以添加数据属性来传递数据，例如：

<li><a href="#" data-value="2" data-action="alertme">$$</a></li>

然后您可以在处理程序中读取：

function alertme(e) 
    console.log(e);
    console.log($(e.element).attr("data-value"));

(demo)

对于选项 #3，您只需将您的操作定义为：

function alertme(val) 
    return function(e) 
        console.log(e);
        console.log(val);
    ;

您的元素将保持原样：

    <li><a href="#" data-action="alertme('2')">$$</a>

(demo)

【讨论】：

为简单起见，我最终选择了选项 #1

拉斯你是个天才。您的解决方案 2 正是我所需要的，谢谢您的示例！