Observe external Javascript object

[philip...@gmail.com]

Hi there, im just in the middle or trying to hook up a Javascript module that connects to a real time service through Web sockets to work with some Web components I've built.

Basically I'm just wondering is it possible to have a Web component property value set to an external Javascript object and when the external Javascript object changes my Web component property will update with the same data. Basically the two have binding set up.

I will update this post with some code examples.

Thanks.

[Eric Bidelman]

Yep, that's possible. Observing external sources gets a bit tricky if the data is changed without using Polymer's set() API.

It would be helpful to see what you're trying to do.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/9f52feb2-cda2-4469-acec-51b30ce82f8e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[philip...@gmail.com]

Thanks for the response Eric, I've got an example in work which I'll post up on Monday. I've been using the object set method when the external Javascript object updates but it doesn't update the view. Even though I can see the polymer object has updated along with the external object.

[philip...@gmail.com]

Hey so a simple example of what I am trying to achieve.

So I have a standard JavaScript module that exposes some properties and some functions. Lets call it realtime.js

The purpose of this module is to use another library which handles connecting to and receiving data from a real time service with Web sockets. 

It has a property with which is an object that holds the data that is returned and updated from the Web sockets service.

var realtime = (function(){

var module = {};

module.dataModel = {};




onDataEvent: function(webClientMessage){

 //In here we handle updates from the realtime service and update the module.dataModel.

modulde.dataModel = "UPDATES FROM WebClientMessage"

}
return module;
}

Now in my Web component I want to pass the realtime.dataModel as an attribute and have it bound to a property inside the web component. So when the realtime.dataModel updates the Web component property would update ( on the view as well )

My component would look this

<wc-sb-realtime-api realTime={{realtime}} ></wc-sb-realtime-api> "QUESTION" - can I pass the realtime javascript module like this to the web component or do I need to do something else to make it observe the changes.

<dom-module id="wc-sb-realtime-api">

  <template>

  </template>

  <script>

    (function() {

      'use strict';

      Polymer({

        is: 'wc-sb-realtime-api',

        properties: {

          realTime:{

            type: Object,

            notify:true,

          }

        },

        created: function () {

          

        },

        ready: function () {

          var self = this;

          realtime.connectionManager.connect(function () {

            realtime.subscriptionManager.subscribe("TO_SOME_SORT_OF_REALTIMEDATA");

            setTimeout(function () {
              //This works fine, althought I have to add in a delay to allow the dataModel to get it's initial data from the service.

              self.set("realTime.dataModel", realtime.dataModel);

            },3000);

          });

        },

        attached: function () {

        }

      });

    })();

  </script>

</dom-module>

So I now just want to be able to stick my web component on the page and have it expose the data to other web components that would be on the page or dependant on this component.

Hope this is a bit clearer, this is just an example of what I want to achieve. Any help would be great!

[philip...@gmail.com]

Hey Eric,

I managed to get it working, I was observing the external object fine, the problem was that the Object had properties that were arrays which made it complicated. I managed to get it working. I used the _notifySplices to help me out.

Thanks :)

On Friday, January 29, 2016 at 7:14:38 PM UTC, Eric Bidelman wrote:

[Tomek W]

But be aware that _notifySplices uses Polymer.Collection keys instead of array indexes, latest Polymer 1.2 has notifySplices that covers that, but then it requires you to normalize your splices somehow, to meet their needs, and you cannot call it consecutively.

Here you have few related issues
https://github.com/Polymer/polymer/issues/2752
https://github.com/Polymer/polymer/issues/2540
https://github.com/Polymer/polymer/issues/2680