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

Question

请求：

• 我有一个websocket，它抽取键值数组
• 浏览器端，当接收到websocket消息时，应绘制不同类型的实时图形

当前状态：

• 我使用敲除自定义处理程序绑定(绘制不同的图(实现了不同的图和web套接字流绑定

我的问题是：

• 目前，每个图形上绘制一个值
• 但我认为多个值应该画在同一张图上

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

编辑：

我制作了一个示例代码，我希望使用它实现相同的功能KnockOut。目前我使用的是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找到连接点。

Answer 1

您可以在绑定中放入额外的可观测值，并在allBindings中访问它们。

最终结果是绑定"依赖"于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)。