如何使用SignalR从服务器传递数组并使用Knockout显示结果

I am playing with SignalR and KnockoutJS and can't seem to find a simple way to get an array from the database presented using the MVC4 framework.

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

I have no problem sending a single object from the server - but when I try to send an array I get stuck. Hopefully someone with more experience can spot the probably obvious mistakes I am making, and show how this should be done (JavaScript is not my strong side). The problem as far as I can understand is the mapping of the data passed from the server. Any help is much appreciated!

从服务器发送单个对象没有问题 - 但是当我尝试发送数组时，我遇到了问题。希望有更多经验的人可以发现我正在制作的明显错误，并展示如何做到这一点（JavaScript不是我强大的一面）。据我所知，问题是从服务器传递的数据的映射。任何帮助深表感谢！

The SignalR Hub (orders is a simple table with Id and Name)

SignalR Hub（订单是一个带有Id和Name的简单表）

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

Simple HTML code to present the 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

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>

1 个解决方案

#1

A couple of points:

几点：

1. Just use ko.observableArray(), i.e. without the parameter
2. 只需使用ko.observableArray（），即不带参数
3. Put the call to ko.applyBindings inside your ready function, e.g. just before you get your hub reference
4. 将调用ko.applyBindings放入准备好的函数中，例如就在您获得集线器参考之前

That should be enough to get it working. At least, it works me in this fiddle which I based on your code.

这应该足以让它运作起来。至少，它是基于你的代码我这个小提琴。

One further point though ... you are passing plain JSON objects to KO (i.e. inside your observable array). This is like data-binding in C# against some classes that do not implement INotifyPropertyChanged. IOW the binding will work properly once and changes in the objects will never get reflected on the UI. If you want SignalR to feed changes into your objects, then they will need to have observable properties and you might want to look into the KO mapping plugin.

还有一点......你将普通的JSON对象传递给KO（即在你的可观察数组中）。这就像C＃中针对某些未实现INotifyPropertyChanged的类的数据绑定。 IOW绑定将正常工作一次，对象中的更改将永远不会反映在UI上。如果您希望SignalR将更改提供给您的对象，那么它们将需要具有可观察的属性，您可能希望查看KO映射插件。