在淘汰视图模型声明中调用 jquery 函数。 （主要是语法问题）

Posted 2023-03-27

【中文标题】在淘汰视图模型声明中调用 jquery 函数。 （主要是语法问题）

【英文标题】：Calling jquery function inside a knockout viewModel declaration. (mainly a syntax issue)

【发布时间】：2017-11-18 14:02:33

【问题描述】：

我有一个名为“applications”的视图模型，其中包含申请人的信息。在淘汰赛中看起来像这样：

[![在此处输入图片描述][1]][1]

我尝试遍历这个 viewModel 并根据特定条件仅过滤掉一个元素。

我最终想要做的是，我只想在模式中显示一个“应用程序”元素。

所以，到目前为止，我所做的是，

<a href="#" data-toggle="modal" data-target="#previewApplicantModal" data-bind="attr:  'data-applicationKey': application.applicationKey ">
    Preview Application
</a>

我添加了一个名为applicationKey的属性，所以它直接检索申请人的“applicationKey”。

我创建了一个 jquery 函数，通过这样做返回这个 applicationKey：

                $('#previewApplicantModal').on('show.bs.modal', function (e) 
                    var key = $(e.relatedTarget).data('applicationkey');
                    return key;
                );

读取“data-applicationKey”，返回对应的applicationKey。

例如，

<a href="#" data-toggle="modal" data-target="#previewApplicantModal" data-bind="attr:  'data-applicationKey': application.applicationKey " data-applicationkey="abd263zqe">
    Preview Application
</a>

返回

abd263zqe

之后，我尝试创建一个名为“previewApplication”的新视图模型，它只返回具有该“applicationKey”的应用程序元素。我所做的是，我遍历了“应用程序”视图模型，并且仅当“i.application.applicationKey”等于我上面编写的 jquery 函数返回的“applicationKey”时才返回。代码如下所示：

            self.previewApplications = ko.computed(function () 
                return ko.utils.arrayMap(self.applications(), function (i) 
                    if(i.application.applicationKey == THE JQUERY FUNCTION THAT RETURNS THE applicationKey)    
                       return i.application;
                );
            );

所以，我想返回与 jquery 函数返回的具有相同 applicationKey 的“应用程序”元素，但我不知道如何将其放入语法中。

【参考方案1】：

尝试修改您的 jQuery 事件以将密钥存储在您的 previewApplicationKey 可观察对象中

$('#previewApplicantModal').on('show.bs.modal', function (e) 
    var key = $(e.relatedTarget).data('applicationkey');
    viewModel.previewApplicationKey(key);
);

然后在您的比较函数中检查该值

self.previewApplications = ko.computed(function () 
    return ko.utils.arrayMap(self.applications(), function (i) 
        if(i.application.applicationKey == self.previewApplicationKey())    
            return i.application;
    );
);

【讨论】：

第一次初始化时“self.previewApplicationKey”必须是“ko.observable(null)”吗？

@user7677413 默认情况下该值未定义，因此您可以排除“null”。如果您要在绑定中使用它并希望 UI 相应地更新，它确实需要是一个 ko.observable。对于这种特定情况，您可能不需要它也可以是普通变量。

哦，太好了。现在我快到了！如果我单击该链接并尝试在控制台上键入“viewModel.previewApplicationKey()”，它会为我提供正确的 applicationKey，并且当我检查“viewModel.previewApplication()”时，除了具有相应 applicationKey 的元素之外的所有元素未定义.所以，现在我要做的是返回唯一一个不是“未定义”的元素，我该如何过滤掉它？

我通过将arrayMap 更改为arrayFilter 解决了这个问题。因此，当我单击链接时，“previewApplication”仅包含一个元素。现在我试图在我的 html 上显示它。我所做的已添加到我的 EDIT 中。谢谢！

@user7677413 我正在开车回家，有点无法回答，所以我很高兴听到它成功了。