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);
}

我的Knockout模板我的HTML如下（值得注意的是我的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中的更改自动更新，但我希望它看起来漂亮和流畅。

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

Answer 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。

Answer 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

Answer 3

上述解决方案是正确的，但它们太复杂了。

我为您的任务编写了更简单的示例 - 它更改了给定元素的'opacity'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是一个自定义绑定）。

祝你好运！

将jQuery.animate（）添加到Knockout.js自定义绑定？

3 个答案: