0

当服务器上的模型发生更改时，我正在使用 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。这与我的 CSSleft和预期的一样工作，并top根据 ViewModel 中的更改自动更新，但我希望它看起来漂亮和流畅。

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

4

3 回答 3

2

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

你的 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 。

于 2013-10-28T17:28:40.517 回答
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 演示

于 2013-10-29T09:31:38.540 回答
0

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

我为您的任务编写了更简单的示例 - 它更改了给定元素的“不透明度”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 是自定义绑定）。

祝你好运！

于 2014-10-02T10:09:29.903 回答