0

所以现在我有一个显示一些值的表，并且我有一个冲突指示器。当用户单击指示器时，会出现一个新的 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   !

在哪里 ！是冲突指标。点击！将显示冲突 div 并根据单击的内容显示冲突 1 和冲突 2 或冲突和冲突 b。

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

}

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

ps 我已经编辑了大约 800 次，如果无法理解，我深表歉意。

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

4

2 回答 2

1

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

于 2013-05-29T22:15:41.633 回答
0

我将用一点来扩展 Thomas 的答案，当您想要为“if”或“with”绑定的渲染/取消渲染设置动画时，自定义绑定不起作用。尝试与“if”或“with”同时运行的动画绑定将无法在其他绑定更改 DOM 之前完成动画，可能会从页面中删除正在动画的元素。没有办法将绑定处理推迟到事件完成之后。

对于这些情况，动画应该通过“foreach”绑定的“afterAdd”和“beforeRemove”回调来实现，当希望对页面中添加和删除的元素进行动画处理时。'if' 和 'with' 绑定可以毫不费力地重写为 'foreach'，因为 'foreach' 可以采用单个参数而不是列表。我真的希望将动画教程扩展为包含此解决方法。

于 2014-02-12T21:27:11.930 回答