如何在 Kendo UI 移动 ListView 上显示实时推送消息？答案

【问题标题】：How to display real-time push messages on Kendo UI mobile ListView?如何在 Kendo UI 移动 ListView 上显示实时推送消息？
【发布时间】：2014-01-08 02:54:03
【问题描述】：

每当有新消息到达时，我可以使用 JQuery append 在浏览器上显示来自 RabbitMQ SockJS Server 的实时推送消息。但是，我无法弄清楚如何在 Kendo UI 移动 ListView（Kendo 版本 2013.3.1119）上按降序显示消息 - 顶部的新消息。这应该在没有用户干预刷新 ListView 的情况下完成。

我创建了一个测试并发布在 JSBin - link

JSBin 示例注意事项：

1)。 Stomp.js (STOMP over websocket) 和 sockjs.js (SockJS Javascript client) 用于创建从 RabbitMQ SockJS Server 捕获消息的 websocket 客户端。

对于 JSBin 示例，我已将与 STOMP (listener-app.js - 请参阅 - http://pastebin.com/6qLxH8R6) 一起使用的 Javascript 代码附加到 SockJS Javascript 客户端 (sockjs.js) 中我无法让 JSBin 在单独的文件中与 listener-app.js 一起使用。组合的脚本现在是 stomp-listener-app.js。注意我在本地测试时没有这个问题。

2)。有 2 个导航按钮，“实时列表视图”和“调试日志”。调试日志捕获 stomp.js 调试消息，这些消息将使用 JQuery 附加显示在“调试日志”视图中。实时 ListView 视图应该在列表视图中显示 STOMP 消息 - 我无法这样做。

3)。尽管 JSBin 示例没有链接到实时 SockJS 服务器，但 STOMP 库仍然会生成一些可以被 Kendo UI 捕获的错误消息。

我是 JS 和 Kendo UI 的初学者。如果我错过了什么，请告诉我。任何指针将不胜感激。谢谢。

【问题讨论】：

建议：尝试隔离主要问题以降低问题的复杂性 - 例如从等式中删除 RabbitMQ 等，并创建一个仅使用 ListView 和 setInterval 进行定时更新的示例；这将增加您获得答案的机会
@LarsHöppner 谢谢，你说的是正确的。在发布问题时，我不太了解函数和库是如何在不同的 Javascript 文件之间共享的，这就是我发布 RabbitMQ 代码的原因。现在我知道可以在 Javascript 文件上使用函数，而无需更改或在要使用的文件中声明它。

标签： javascript jquery kendo-ui kendo-mobile

【解决方案1】：

我可以使用prepend/append method 在列表视图顶部插入新消息。

例如：

$("#datalistlistView").data("kendoMobileListView").prepend([{message: 'test'}]);

此代码可以插入到从 html 页面链接的任何 JS 文件中。

关键要求是代码必须在listview初始化后才能运行，否则会出现"Uncaught TypeError: Cannot call method 'prepend' of null"错误。

【讨论】：