Question

所需物品：

我有一个抽取关键值数组的websocket。
浏览器方面，当收到websocket消息时，应绘制不同类型的实时图表

当前状态：

我使用敲除自定义处理程序绑定（绘制不同的图形）实现了不同的图形和与Web套接字流的绑定。

我的问题是：

目前在每个图表上绘制一个值。
但我需要在同一个图表上绘制多个值。

从技术上讲，这可以从图形库方面实现。每当我任何图形的任何一个值来自websocket时，我都需要调用自定义绑定处理程序。

修改

我制作了一个示例代码，我正在寻求实现相同的使用昏死。目前我确实使用过js＆amp;小jQuery脚本。

HTML:
   <div class="element" id="container"></div>
   <button id="StartTrigger">Start</button>
   <button id="StopTrigger">Stop</button>
JS:
  var timer = null;

function startTimer() {
    timer = setInterval(function () {
    drawGraph({
        'x001': Math.floor(Math.random() * 11),
            'x002': Math.floor(Math.random() * 11),
            'x003': Math.floor(Math.random() * 11),
            'x004': Math.floor(Math.random() * 11),
            'x005': Math.floor(Math.random() * 11)
    });
  }, 1000);
  }

  function stopTimer() {
        clearInterval(timer);
  }

  $(function (e) {
     $("#StartTrigger").on("click", startTimer);
     $("#StopTrigger").on("click", stopTimer);
  });

  function drawGraph(obj) {
     $("#container").text(obj.x001 + " " + obj.x004);
  }

这是小提琴。 http://jsfiddle.net/m962dmvL/

所以，请指导我使用KnockOut点缀点。

Answer 1

您可以在绑定中添加其他可观察对象，并在allBindings中访问它们。

最终结果是绑定依赖＆＃34;在x001和x004上（显示它响应x004，注释掉这一行//self.x001(obj.x001);）

http://jsfiddle.net/m962dmvL/1/

<强> HTML

<div class="element" data-bind="myGraph: x001, anotherPoint: x004"></div>

<强> JS

ko.bindingHandlers.myGraph = {
    update: function(element, valueAccessor, allBindings) {
        var mainVal = ko.unwrap(valueAccessor());
        var additionalVal = ko.unwrap(allBindings.get('anotherPoint'));

        $(element).text(mainVal + " " + additionalVal);
    }
};

如果您要绘制未知数量的数据，请考虑使用observableArray。将websocket回调中的数组内容更新为self.dataArray(newData)。

knockout - 在动态元素上绑定多个变量

1 个答案: