0

我需要使 WebSocket 连接的“onmessage”回调函数中可用的数据连接到 KnockoutJS 的组件视图模型。

sockjs.onmessage = function (e) {
        //console.log('[.] message', e.data);
        if(e.data && e.data.length){
            var jsonData = JSON.parse(e.data);

            //I need to make this jsonData available to Custom Component of knockoutJS

        }

    };

但这里的问题是，我没有在我的代码中创建 ViewModel 的实例。我正在使用 KnockoutJS 的自定义组件并通过以下代码注册它

ko.components.register('bing-map', {
        viewModel: { require: 'bing-maps/bing-maps' },
        template: { require: 'text!bing-map/bing-map.html' }
    });

我的组件的视图模型如下

define(['knockout'], function(ko){
var MapViewModel = function(params){
    var self = this;
    self.map = {
        options:{
            credentials:<bing map key>
        }
    }
}
return MapViewModel;
});
4

1 回答 1

1

将本地 observable 或 viewmodel 传递给自定义组件

并在套接字事件上更新本地可观察对象（这将更新组件）

ko.components.register('bing-map', {
  viewModel: MapViewModel,
  template: '<div data-bind="foreach: data"><div data-bind="text: $data"></div></div>'
});


function MapViewModel(params) {
  var self = this;
  self.map = {
    options: {
      credentials: params.other
    }
  };
  debugger;
  self.data = params.data;
}

// it could a ViewModel or just a global observable
var dynamicData = ko.observableArray([Number(new Date())]);
ko.applyBindings();


// socket.io simulation
var timer = 0;
var si = setInterval(function() {
  dynamicData.push(Number(new Date()));
  timer++;
  // clear after 10 intervals
  if(timer > 9) clearInterval(si);
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<bing-map params="data: dynamicData, other: 123"></bing-map>

于 2017-05-26T16:48:34.787 回答