javascript - knockout -在动态元素上绑定(bind)多个变量

要求：

我有一个websocket，可以泵送键值数组。
浏览器端，当收到websocket消息时，应绘制不同类型的实时图形

当前状态：

我实现了不同的图形，并使用淘汰的自定义处理程序绑定（绘制不同的图形）与Web套接字流进行了绑定。

我的问题是：

当前，在每个图形上绘制一个值。
但是我需要在同一张图上绘制多个值。

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

编辑：

我做了一个示例代码，我希望使用
昏死。目前，我确实使用js和小型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连接点。

最佳答案

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

最终结果是绑定对x001和x004都是“依赖的”（以表明它对x004做出了响应，请在此行//self.x001(obj.x001);中注释掉）

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

的HTML

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

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)。