将 jQuery.animate() 添加到 Knockout.js 自定义绑定？答案

【问题标题】：Adding jQuery.animate() to a Knockout.js custom binding?将 jQuery.animate() 添加到 Knockout.js 自定义绑定？
【发布时间】：2013-11-07 13:49:52
【问题描述】：

当服务器上的模型发生更改时，我正在使用 SignalR 和 Knockout.js 在我的视图中显示移动。

我的实体有一个非常简单的 ViewModel（它们是红色的小方块，当它们在服务器端“移动”时会在屏幕上“移动”）：

function Entity(data) {
    var self = this;
    self.id = data.UID;
    self.left = ko.observable(data.Left);
    self.top = ko.observable(data.Top);
}

我的 HTML 的 Knockout 模板如下（值得注意的是我的 CSS 类实体分配了绝对定位）：

<!-- ko foreach: entities -->
    <div data-bind="attr: { id: 'ent' + id }, style: { top: (top() + 'px'), left: (left() + 'px')}" class="entity">
    </div>
<!-- /ko -->

所以当我在服务器上的模型发生变化时（在这种情况下它是一个位置属性），我使用 SignalR 的 RPC 功能来更新每个单独实体的相关 ViewModel。这可以正常工作，我的 CSS left 和 top 根据 ViewModel 中的更改自动更新，但我希望它看起来漂亮流畅。

使用 Knockout 在线搜索绑定到 ViewModel 的 jQuery 动画和 SO 只会真正出现 fadeIn / fadeOut 可见性动画，而我想在画布上显示“运动”。有人在做类似的事情上取得过成功吗？

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

您可以创建自己的自定义绑定，而不是通过内置的敲除绑定直接设置顶部和左侧位置。

您的 html 将如下所示：

<!-- ko foreach: entities -->
  <div data-bind="attr: {id: 'ent' + id }, moveable: { top: top(), left: left()">
  </div>
<!-- /ko -->

然后对于您的自定义绑定（在上面的示例中命名为 moveable），您可以编写添加一个 jQuery 转换到绑定的更新函数。它应该大致是这样的：

update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var values = valueAccessor();
    $(element).animate({top: values.top() + 'px', left: values.left() + 'px'}, 1);
}

稍后您可以为自定义绑定添加更多精美的选项和逻辑以满足您的需求。有关自定义绑定的更多信息，请参阅：http://knockoutjs.com/documentation/custom-bindings.html。

【讨论】：

【解决方案2】：

您可以将实体更改为

function Entity(data) {
    var self = this;
    self.id = data.UID;
    self.position = ko.observable({left: data.Left, top : data.Top});
}

并使用此自定义绑定

ko.bindingHandlers.animate = {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
       $(element).animate(valueAccessor(), 1000);
   }
};

查看

<div data-bind="attr: { id: 'ent' + id }, animate: position()" class="entity">
</div>

JSFiddle DEMO

【讨论】：

【解决方案3】：

上面的解决方案是对的，但是太复杂了。

我为您的任务编写了更简单的示例 - 它更改了给定元素的“不透明度”css 属性。你可以在这里查看：http://jsfiddle.net/HjYr4/11/

ko.bindingHandlers.animateOpacity = {
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    $(element).stop(true, false);
    $(element).animate({ opacity: valueAccessor() } , 1000);
}

此外，您可能会发现在 http://knockoutjs.com/documentation/custom-bindings.html 处阅读有关自定义绑定的文档很有用（在我的示例中 animateOpactiy 是自定义绑定）。

祝你好运！

【讨论】：