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

How to pass an array from a server with SignalR and present the result using Knockout

本文关键字：Knockout 结果 显示 数组 SignalR 何使用 服务器      更新时间：2023-09-26

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

我从服务器发送一个对象没有问题，但当我试图发送一个数组时，我会被卡住。希望有更多经验的人能发现我可能犯的明显错误，并展示如何做到这一点（JavaScript不是我的强项）。据我所知，问题在于从服务器传递的数据的映射。非常感谢您的帮助！

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

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>

几个要点：

  1. 只需使用ko.observableArray()，即不使用参数
  2. 将对ko.applyBindings的调用放在就绪函数中，例如，在获得集线器引用之前

这应该足以让它发挥作用。至少，它在我基于你的代码的小提琴中工作。

还有一点。。。您正在将纯JSON对象传递给KO（即在您的可观察数组内）。这类似于C#中针对某些类的数据绑定，这些类不实现INotifyPropertyChanged。IOW绑定将正常工作一次，对象中的更改将永远不会反映在UI上。如果你想让SignalR为你的对象提供更改，那么它们需要有可观察的属性，你可能需要研究KO映射插件。

相关文章：