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

So right now I have a table that displays some values and I have an indicator for conflicts. When the user clicks the indicator a new div appears with some animation to list all the conflicts.

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

Here is my HTML:

这是我的HTML：

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

The data might look something like this:

数据可能如下所示：

{
 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
            }

So the first table is going to look like this:

所以第一个表看起来像这样：

Property 1
Property 2   !
Property 3   !

Where ! is a conflict indicator. Clicking on the ! would display the conflicts div and also display conflict1 and conflict2 or conflicta and conflictb depending on which was clicked.

哪里！是一个冲突指标。点击！将显示冲突div并显示conflict1和conflict2或conflicta和conflictb，具体取决于被点击的内容。

Here is the model we are working with. It's a bit complex because of the mapping for the properties from signalr. the "selectProperty" and "selectedProperty" was our way of saying which one to display conflicts for, but I'm not convinced this is the best way to do it.

这是我们正在使用的模型。由于信号器的属性映射，这有点复杂。 “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);
        };
    };

}

Originally the click event directly called a javascript function that did all the animation, but my coworker thought that might violate best practices for separating data and viewmodel in MVVM. Does it? Should we leave it calling the viewmodel function of "selectProperty" which allows us to pass context for the "conflicts popup" div? If so, do I just call the javascript function to do the animation from within the selectProperty function?

最初的click事件直接称为执行所有动画的javascript函数，但我的同事认为可能违反了在MVVM中分离数据和视图模型的最佳实践。可以？我们应该让它调用“selectProperty”的viewmodel函数，它允许我们为“冲突弹出”div传递上下文吗？如果是这样，我是否只是调用javascript函数从selectProperty函数中执行动画？

p.s. I've edited this about 800 times so I apologize if it's impossible to follow.

附：我已经编辑了大约800次，所以如果无法遵循，我会道歉。

update I have the bindings working now, so I really just want to know what is best practice when it comes to UI animations and Knockout. Change the viewmodel from the javascript function or call the javascript function from the viewmodel function?

更新我现在有绑定工作，所以我真的只想知道UI动画和Knockout的最佳实践。从javascript函数更改viewmodel或从viewmodel函数调用javascript函数？

2 个解决方案

#1

Regarding UI animations in my opinion it is best practice to implement custom bindings. This way code is encapsulated and it is easy to find where it is used. Check Animated transitions example on knockout website.

关于UI动画，在我看来，最好的做法是实现自定义绑定。这种方式代码是封装的，很容易找到它的使用位置。检查淘汰网站上的动画过渡示例。

#2

i'm going to extends Thomas answer with one point, custom bindings don't work when you want to animate the rendering / unrendering of the 'if' or 'with' bindings. an animation binding that tries to run at the same time as an 'if' or 'with' won't be able to complete the animation before the other binding alters the DOM, possibly removing the elements being animated from the page. there is no way to defer the binding processing until after the event completes.

我要用一点来扩展Thomas的答案，当你想要动画渲染/取消渲染'if'或'with'绑定时，自定义绑定不起作用。试图在“if”或“with”的同时运行的动画绑定将无法在另一个绑定改变DOM之前完成动画，可能会从页面中删除动画元素。在事件完成之后，无法推迟绑定处理。

for these cases animations should be implemented via the 'afterAdd' and 'beforeRemove' callbacks of the 'foreach' binding when the desire is to animate an element being added and removed from the page. 'if' and 'with' bindings can be rewritten as 'foreach' with little effort, as 'foreach' can take a single argument instead of a list. i really wish the animation tutorial would be extended to include this workaround.

对于这些情况，当需要动画从页面添加和删除的元素时，应通过'foreach'绑定的'afterAdd'和'beforeRemove'回调来实现动画。 'if'和'with'绑定可以用很少的努力重写为'foreach'，因为'foreach'可以采用单个参数而不是列表。我真的希望动画教程能够扩展到包含这个解决方法。