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 [email protected].
For more options, visit https://groups.google.com/d/optout.
