Обратный вызов сообщений WebSocket и Knockout JS View Model Communication

Question

Мне нужно сделать данные, которые доступны в функции обратного вызова "onmessage" соединения WebSocket с компонентной моделью представления 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

        }

    };

Но проблема в том, что я не создаю экземпляр View Model в своем коде. Я использую пользовательские компоненты 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;
});

Answer 1

Передать локальную наблюдаемую или 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>