Mvvm 如何使用knockout处理UI动画事件

所以现在我有一个表显示一些值，还有一个冲突指示器。当用户单击该指示器时，将显示一个新的div，其中包含一些动画，以列出所有冲突

这是我的HTML：

<span data-bind="if: hasConflict, click: $parent.selectProperty" class="conflictWarn"><i style="color: darkorange; cursor:pointer;" class="icon-warning-sign"></i></span>

第一张表是这样的：

{
 name:Property 1,
 id: 1,
 hasConflicts: no,
 name:Property 2,
 id: 2,
 hasConflicts: yes,
 conflicts: {
             name: conflict1,
             name: conflict2
            }
 name:Property 3,
 id: 3,
 hasConflicts: yes,
 conflicts: {
             name: conflicta,
             name: conflictb
            }

Property 1
Property 2   !
Property 3   !

哪里！这是一个冲突指示器。点击网页！将显示conflicts div，还将显示conflict1和conflict2或conflicta和conflictb，具体取决于单击的是哪个

这是我们正在使用的模型。这有点复杂，因为signalr的属性映射。“selectProperty”和“selectedProperty”是我们用来表示显示冲突的方式，但我不认为这是最好的方式

function ItemViewModel() {
    var self = this;
    self.name = ko.observable("");
    self.itemType = ko.observable("");
    self.propertiesArray = ko.observableArray([]);
    self.properties = ko.mapping.fromJS({});
    self.selectedPropertyName = ko.observable("");
    self.getItem = function (name) {
        $.connection.mainHub.server.getItem(name).then(function (item) {
            ko.mapping.fromJS(item.properties, self.properties);
            self.propertiesArray(item.propertiesArray);
            self.itemType(item.itemType.name);
            self.name(item.name);
        });
        self.selectProperty = function (a, b) {
            self.selectedPropertyName(a);
        };
    };

}

最初，click事件直接调用一个javascript函数来完成所有动画，但我的同事认为这可能违反了MVVM中分离数据和viewmodel的最佳实践。是吗？我们是否应该让它调用“selectProperty”的viewmodel函数，该函数允许我们为“conflicts popup”div传递上下文？如果是这样的话，我是否只需要调用javascript函数从selectProperty函数中执行动画

p、 我已经编辑了大约800次了，所以如果无法理解，我道歉

---

更新我现在已经有了绑定，所以我真的只想知道在UI动画和淘汰方面什么是最佳实践。从javascript函数更改viewmodel或从viewmodel函数调用javascript函数？

关于UI动画，我认为实现自定义绑定是最佳实践。通过这种方式封装代码，很容易找到代码的使用位置。请访问knockout网站。

我想说一点，当你想为“if”或“with”绑定的渲染/取消渲染设置动画时，自定义绑定不起作用。尝试与“if”或“with”同时运行的动画绑定将无法在另一个绑定更改DOM之前完成动画，可能会从页面中删除正在设置动画的元素。无法将绑定处理延迟到事件完成之后

---

在这些情况下，当需要为页面中添加和删除的元素设置动画时，应通过“foreach”绑定的“afterAdd”和“beforeRemove”回调来实现动画if'和'with'绑定可以轻松地重写为'foreach'，因为'foreach'可以接受单个参数而不是列表。我真的希望动画教程能够扩展到包括这一解决方法。

Tomas的答案是最佳实践，如果有疑问，请按照框架网站上描述的方式进行。额外的奖金，淘汰赛是例外记录