是否可以将更新“注入”到 Knockout ViewModel 中？答案

【问题标题】：Is it possible to "inject" updates into a Knockout ViewModel?是否可以将更新“注入”到 Knockout ViewModel 中？
【发布时间】：2014-06-07 09:34:45
【问题描述】：

我目前正在寻找解决问题的方法：在我们的 ASP.NET MVC 应用程序中，有一些页面用于工业设备的实时数据可视化。当页面被加载时，会显示一个加载图标，同时我会从数据库中获取包含所有数据点当前值的视图模型数据。这工作得很好，但它是静态的，我的意思是页面上的值在完成加载后不会改变。 Web 应用程序本身使用 TCP 侦听器，该侦听器从设备接收带有值的消息。这些消息（基本上由设备 id、数据点 id 和值组成）不会以固定的时间间隔到达，而是基于事件的，例如当温度值向上或向下变化 0.5 K 时。

在我的页面上，我有一些图形小部件，例如仪表和许多其他元素，它们可以正确显示页面加载时加载的初始数据中的值。它们绑定到 Knockout 视图模型。

问题是这样的：每当一个新值到达服务器时，我想在页面上显示它而不需要重新加载。我绝对不想在到达服务器的每条消息上使用数百个数据点重新传输整个视图模型（大约每秒 1 到 15 个）。为了实现这一点，我实现了 SignalR 框架，它真的很好用。使用该机制，我现在在客户端窗口中接收新值（这意味着，我在 Javascript 中接收它并且现在有一个如下所述的值对象）。

我现在需要的是：由于每个视图模型都是动态构建的，它们都是不同的。两个设备的对象和属性树不同，因此每个设备都可以有不同级别的子对象。唯一相同的是实际保存每个数据点值的对象的结构：它始终由上述设备 ID、数据点 ID 和值组成。

我需要一种方法来更新视图模型中的值对象内的double-type 值，其设备 ID 和数据点 ID 与新到达的值消息匹配（也包含这两个类似地址的 ID 和值） .

我希望我能理解这个想法。有没有办法做到这一点？这种机制的最佳实践是什么？我最近切换到 Knockout-MVC（kMVC nuget 包），但如果有帮助，我也会回到“纯”Knockout.js 和一些额外的脚本。

感谢您的帮助和建议！

【问题讨论】：

我理解你的问题是正确的，我认为你应该看看计算的 Observables。这样，您就可以解释收到的新值。您需要计算新值，然后删除数据，否则最终会耗尽内存。 knockoutjs.com/documentation/computedObservables.html
一些示例代码会有所帮助
您可以正确地创建一个带有键/值的数组，并将您的数据绑定到一个获取键并返回值的函数。当您更新数据点时，您必须更新数组中的键/值。
类似这样的东西：jsfiddle.net/RrBB7/2
你看过knockout-mapping插件吗？ knockoutjs.com/documentation/plugins-mapping.html

标签： c# asp.net-mvc knockout.js signalr knockout-mvc

【解决方案1】：

http://nthdegree.azurewebsites.net/mvvm-2/

这是一篇对Knockout mapping plugin的文章

一般的想法是你应该有你的视图模型代码来加载你的模型。

您将绑定您的视图模型，该模型将具有您通过 ajax 调用从服务器加载的属性（请参阅文章底部）。

然后您只需使用

使用结果更新模型

ko.mapping.fromJS(newData, mapping, modelToUpdate)


var mapping = {}; //define your mapping (see documentation or blog post)

function ViewModel(){
    var self = this; 

    self.model = ko.mapping.fromJS({}, mapping);
    self.hub = $.connection.myHub(); 
    self.hub.client.updateModel = function(data){
       ko.mapping.fromJS(data, mapping, self.model);
    };
    self.hub.start().done(function(){
       //you could either make a call or have the "OnConnected" method trigger an 'updateModel'
    });
}

【讨论】：

【解决方案2】：

链接到 DOM 元素时的 ViewModel 属性允许编辑，这实际上是在更新 KO 可观察数组中的数据。您是否可以使用您所说的一致的 ID 更改“图形小部件”的值（假设它使用某些属性来保持高度和宽度）？

我没有测试过；另一种选择是使用 KO foreach 循环并更新相关值。

【讨论】：