【问题标题】:After update knockout.js and SignalR libraries knockout-mapping js not update the list in view更新 knockout.js 和 SignalR 库后,knockout-mapping js 不会更新视图中的列表
【发布时间】:2019-01-19 22:15:01
【问题描述】:

我有以下代码。但不更新视图页面。

在我的 app.js 中

// Hub 回调:更新用户列表

    hub.client.updateUserList = function (userList) {
        viewModel.setUsers(userList);
    };

在我的 viewmodel.js 中

 var viewModel = {
        Users: ko.mapping.fromJS([]), 
}
 viewModel.setUsers = function (userArray) {
        ko.mapping.fromJS(userArray, viewModel.Users);     
    };

我的 SignalR 集线器类

 private void SendUserListUpdate()
 {
            Users.ForEach(u => u.InCall = (GetUserCall(u.ConnectionId) != null));
            Clients.All.updateUserList(Users);
  }

此信号R SendUserListUpdate() 正确更新用户列表。但在下面的索引页面中没有更新。

 <div class="well user-list">
                            <ul class="nav nav-list">
                                <li class="nav-header">Online Users <small data-bind="text: Users().length"></small></li>
                                <!-- ko foreach: Users -->
                                <li class="user" data-bind="attr: { 'data-cid': ConnectionId, 'title': Username }">
                                    <a href="#">
                                        <!-- only using an a here for bootstrap styling -->
                                        <div class="username" data-bind="text: Username"></div>
                                        <div class="helper" data-bind="css: $parent.getUserStatus($data)"></div>
                                    </a>
                                </li>
                                <!-- /ko -->
                            </ul>
                        </div>

我使用的脚本。

   <script src="~/Scripts/adapter.js"></script>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/knockout-3.4.2.js"></script>
    <script src="~/Scripts/knockout.mapping-latest.js"></script>
    <script src="~/Scripts/alertify.min.js"></script>
    <script src="~/Scripts/WebRtcDemo/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.3.0.min.js"></script>

【问题讨论】:

    标签: knockout.js signalr signalr-hub knockout-mapping-plugin


    【解决方案1】:

    从服务器映射新数组数据时添加映射对象参数。 此外,您还可以通过 ko.observableArray([]);

    创建可观察数组
    var viewModel = {
            Users: ko.observableArray([]), 
    }
     viewModel.setUsers = function (userArray) {
            ko.mapping.fromJS(userArray, {}, viewModel.Users);     
        }; 
    

    【讨论】:

    • 我添加了 ko.mapping.fromJS(userArray, {}, viewModel.Users);和用户:ko.observableArray([]),原样。但同样的.Users().length 仍然是 = 0
    • 你检查过setUsers函数在调用时接收到非空的js数组吗?
    • 在 SignalR hub SendUserListUpdate() 函数中,用户列表具有值并实时更新。但是如何签入 viemodel.js?
    • 在浏览器中,按F12获取开发者工具,在源码中打断点。如果你不熟悉它,为了快速检查,只需输入 alert(ko.mapping.toJSON(userArray));作为 setUsers 函数的第一行。 ii 将显示数组的 json 字符串。但如果您的 userArray 为 null 或未定义,它将失败。
    • 我检查了,但我发现它一直没有命中 setUsers() 函数,我不知道为什么。但无论如何我使用这个代码github.com/mgiuliani/webrtc-video-chat。当您运行它时,它工作正常。但是当升级所有库时,用户列表没有在同一个解决方案中更新。你能检查一下吗?谢谢。
    【解决方案2】:

    我之前确实在集线器启动后调用了客户端函数。我根据下面的描述修复了它,升级信号R应该定义在集线器启动之前声明的客户端函数。 SignalR JS Client Methods Not Invoked

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-09-02
      • 2013-02-23
      • 1970-01-01
      • 2021-08-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-11-01
      相关资源
      最近更新 更多