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

Question

当服务器上的模型发生更改时，我使用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 -->

因此，随着服务器上的模型发生变化(在本例中是Location属性)，我使用SignalR的RPC功能来更新每个单独实体的相关ViewModel。这与我的CSS left和top按照ViewModel中的变化自动更新的预期一样工作，但我希望它看起来很漂亮和平滑。

在网上搜索jQuery动画，使用Knockout绑定到ViewModel的动画，实际上只能显示fadeIn / fadeOut可见性动画，而我想在画布上显示“运动”。有人在做类似的事情上有成功吗？

Answer 1

可以将实体更改为

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

Answer 2

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

您的html看起来应该是：

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

然后，对于自定义绑定(在上面的示例中名为moveable )，您可以为绑定的update函数编写添加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。

Answer 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是一个自定义绑定)。

祝好运!