挖空JS模板使UI在编辑时“闪现”

Knockout JS Templates makes the UI "flash" when edited

本文关键字：编辑 闪现 UI JS 挖空      更新时间：2023-09-26

我在使用Knockout JS时遇到了一个大问题。在我的视图模型中，我有一个名为 Method（方法）的字段，它实际上是另一个视图模型。

此视图模型可以是三种不同事物之一（它映射到域模型中的多态对象）。为了解决这个问题，我使用模板来检查在域模型中选择了哪种类型的方法，然后显示绑定该类型数据的模板。

检查方法类型的函数如下所示：

this.getTemplate = function (data) {
        var method = data.original.get_Method();
        if (method instanceof MyProj.MethodA)
            return "methodA";
        else if (method instanceof MyProj.MethodB)
            return "methodB";
        else if (method instanceof MyProj.MethodC)
            return "methodC";
    }

我绑定模板的标记如下所示：

<div data-bind="template: {name: getTemplate($data), data: $data.Method}"></div>

这实际上效果非常好，当我通过 UI 中的下拉列表更改方法类型时，域模型会更新并显示正确的模板。然而，我的问题来了。每个模板都包含特定于每种方法类型的多个不同字段。每当我更改其中一个模板显示的视图模型中的值之一时，UI 都会闪烁，我认为这是因为模板再次被选中。这很烦人，看起来非常糟糕。

关于如何解决这个问题的任何想法？任何帮助将不胜感激！

提前致谢

/比约恩

您是否在getTemplate函数中使用了任何可观察的内容。更新该可观察量的值会使模板重新渲染，并获得闪光效果。

查看此链接部分："注5：动态选择使用的模板"。

相关文章：