Confusion about observer paths and bindings.

69 views
Skip to first unread message

hick...@gmail.com

unread,
Nov 30, 2015, 1:29:58 PM11/30/15
to Polymer
Hello,

I'm fairly new to Polymer 1.0, so please bear with me and excuse me if I'm off topic with my questions.
I'm basically trying to translate what is on this page and apply it to 1.0.

Let's say I have a component `x-foo`, in charge of some complex logic (It's a Websocket-based datastore; whenever something changes on the server at a given keypath it is reflected inside a local object at the same keypath).

I'm willing to share an instance of `x-foo` across instances of lots of components `x-bar`. To do so, i'm parenting the `x-foo` and all the `x-bar` components inside of a parent component. So from the parent component referential, the `x-foo` instance is named "cli" via it's `id` attribute, and passed as a binding to all `x-bar` components (Which are therefore siblings of the `x-foo` instance).

Let's now say that `x-foo` has a `status` property which is `readOnly` and also has its `notify` flag set to `true`. From `x-foo` code, updating the `status` property is done using the `_setStatus` method that is automatically created by Polymer.

My main problem is that I fail to understand how component communicate together. For instance, let's say that the `x-bar` component declares a listener like so (`cli` being one of its properties):

```
listeners: { 'cli.status': '_cliStatusChanged' }
```

Then I get a message saying "Uncaught TypeError: Invalid value used as weak map key", because at the time Polymer tries to establish the link to the `cli.status` property, `cli` isn't yet defined probably.

I also tried to do so like this:

```
observers: [ '_cliStatusChanged(cli.status)' ]
```

Unfortunately, doing so only works once, and any subsequent change to the object status never triggers the callback.

The last thing I tried, and works, is to expose the `status` attribute to the parent container, and bind it to all the instances of the `x-bar` components. In this very case, i'm able to do a property inside the `x-bar` component and see changes when they occur, but I feel like something is inherently wrong with this design, as I have to specify `status="{{status}}"` all around the DOM.

Is there anyone with a good resource explaining inter-component messaging? I am aware of the fire() mechanisms, and I explored them successfully, but it felt like a hack as I'm pretty sure what i'm trying to do is already baked by the Polymer internals.

Thank you very much for your time reading my message.
Doodloo.

PS: I'm aware that a snippet of code is usually much more efficient and less error-prone than such explanation... But due to the nature of the project I'm working on, it would be very hard for me to reproduce the problem in a lightweight version of the code, because of my very low Polymer understanding for now. I will however do my best to put a sample together if you guys don't get what i'm trying to say

hick...@gmail.com

unread,
Nov 30, 2015, 5:07:31 PM11/30/15
to Polymer, hick...@gmail.com
Hello everybody,

I have managed to put together a small gist so you see what I'm talking about. Have a look at this gist (Or this JSBin).
At line 52, 79 and 87 are callbacks. They all get called once at the begining. However, only the one at line 52 gets called in a loop.

Basically, i'm wondering if what i'm doing on line 102 is correct.

I hope this sample code will help solving my questions.

Thank you all,
Doodloo.
Reply all
Reply to author
Forward
0 new messages