On Wednesday, October 12, 2016 at 1:34:32 PM UTC+1, Rupert Smith wrote:
>
> So there is an issue with being able to change the state of the component, 
> post initialization, from the consumer of the component. Because if there 
> is a port used to set state on the component... which component?
>

So I have been able to solve this problem without resorting to passing an 
id for the component down the port. Instead, the Elm program managing the 
component listens to its properties using a subscription.

I changed the code to not use attributes to initialize the component, but 
instead use a property. This means that the data does not need to be 
serialized too.

You can then set up a property change listener on the webcomponent:

                properties: {
                    items: {
                        type: Array,
                        notify: true,
                        observer: '_itemsChanged',
                        value: []
                    },

                _itemsChanged: function(newValue, oldValue) {
                    if (app) {
                        app.ports.itemsChanged.send(newValue);
                    }
                }

With app being the Elm program set up in attached:

                attached() {
                    console.log("attached : items = " + this.items);

                    app = Elm.Listbox.embed(this);

                    this._itemsChanged(this.items, []);

                    app.ports.setSelected.subscribe(items => {
                        this.selected = items;
                    });
                },

You will also notice that attached triggers the change notifier for the 
items, so as to set the items to be rendered for the first time, as the 
items may get set prior to 'attached()' being invoked.

This has proved to be very useful, as I had a situation where I created a 
view with a list of items, but the items had not yet been returned from a 
REST endpoint, so the list would show as empty. Now I can set the 'items' 
property after the initial creation of the component, and have the items 
update in the component.

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to