javascript - 如何使用 SignalR 从服务器传递数组并使用 Knockout 呈现结果

Question

我正在使用 SignalR 和 KnockoutJS，似乎无法找到一种简单的方法来从使用 MVC4 框架呈现的数据库中获取数组。

我从服务器发送单个对象没有问题 - 但是当我尝试发送数组时我卡住了。希望有更多经验的人能够发现我可能犯的明显错误，并展示应该如何完成(JavaScript 不是我的强项)。据我所知，问题是从服务器传递的数据的映射。非常感谢任何帮助!

SignalR Hub(订单是一个带有 ID 和名称的简单表格)

public class feedHub : Hub
{
    private dataContext db = new dataContext();
        public void GetAll()
        {
        var orders = db.orders.ToArray();
        Clients.getData(orders);
        }
}

用于显示订单的简单 HTML 代码；

<div id="Demo"> 
  <div data-bind="foreach: orders">
    <div data-bind="html: Id"></div>
    <div data-bind="html: Name"></div> 
  </div>
</div>

JavaScript

<script type="text/javascript">   

    var viewModel = {
       orders: ko.observableArray(orders)
    };


    ko.applyBindings(viewModel, $("#Demo")[0]);

    $(function () {        
        // Client side version of the feebHub class
        var hubcon = $.connection.feedHub;

        // getData called from server 
        hubcon.getData = function (data) { viewModel.orders(data) };

        // Start connection and call getAll
       $.connection.hub.start(function () { hubcon.getAll(); });

    });

</script>

Answer 1

几点:

1. 只需使用ko.observableArray()，即不带参数
2. 将对 ko.applyBindings 的调用放入您准备好的函数中，例如就在您获得中心引用之前

这应该足以使其正常工作。至少，它对我有用 this fiddle我基于你的代码。

还有一点……您正在将纯 JSON 对象传递给 KO(即在您的可观察数组中)。这类似于 C# 中针对某些不实现 INotifyPropertyChanged 的​​类的数据绑定(bind)。 IOW 绑定(bind)将正常工作一次，并且对象中的更改永远不会反射(reflect)在 UI 上。如果您希望 SignalR 将更改提供给您的对象，那么它们将需要具有可观察的属性，您可能需要查看 the KO mapping plugin .