I tried your application on Iceweasel. The checkboxes never get checked,
but opening the Javascript console I can see the messages are getting
through:
"Main: SelectChanged (Dict.fromList [("1","one"),("2","two")])"
wood.js:907:2
"_itemsChanged : newValue = 1,one,2,two,3,three, oldValue =
1,one,2,two,3,three"
It looks like Mdl messages are not coming through. The checkboxes are
rendered correctly (mdl-style), just not checked.
On Tuesday, March 28, 2017 at 12:15:35 PM UTC+2, Rupert Smith wrote:
>
> On Tuesday, March 28, 2017 at 10:21:02 AM UTC+1, Rupert Smith wrote:
>>
>> On Tuesday, March 28, 2017 at 7:26:37 AM UTC+1, Charles-Edouard Cady
>> wrote:
>>>
>>> (2) the ability to write webcomponents in Elm.
>>>
>>> I'm not too sure about number 2: what I've seen in the list so far is
>>> mainly interest in using webcomponents but not so much in writing them.
>>> Does anybody have more information on this? Any help would be greatly
>>> appreciated!
>>>
>>
>> I have implemented a list box as a webcomponent in Elm (and consumed it
>> in Elm too). I'll see what state it is currently in and get back to you.
>> But first, coffee...
>>
>
> Here it is, freshly upgraded to Elm 0.18:
>
> https://github.com/rupertlssmith/wood-polymer
>
> I gave my Elm Polymer components based on Polymer 'paper' the name 'wood'.
> Because wood is related to paper and Elm is wood.
>
> The main files of interest are:
>
>
> https://github.com/rupertlssmith/wood-polymer/blob/master/src/elm/Listbox/Listbox.elm
>
> https://github.com/rupertlssmith/wood-polymer/blob/master/src/webcomponents/wood-listbox.html
>
> You can see how the web component is initialized by passing a property
> (the 'items' function builds this property).
>
> You can see how the web component triggers an event in elm by using a
> property change event handler.
>
> You can see where I make use of the Polymer life-cycle to attach Elm into
> the Dom in the attached() method.
>
> One thing that turned out strange with this is that to make use of
> Polymers automatic ability to notify on changed properties, I had to keep a
> copy of the list box state on the javascript side. I also have its state on
> the Elm side in the Model. This is rather unfortunate, as you can see
> various ports and subscriptions that are need to keep the two sides in
> sync. This feature of Polymer is convenient for working with it in
> javascript, but not for Elm.
>
> The Polymer component would also tend to fire off _itemsChanged, when the
> items have not changed. So you can see I tried to filter out some of these
> spurious firings with arrays equal tests.
>
> I used Polymer as a convenient way of getting started with web components,
> but I think perhaps it is the wrong library. Really Elm needs some support
> for web components added to it that is better attuned to how Elm works. My
> suggestion is a new Program type in Elm, that helps you build an Elm
> Program-as-webcomponent. However, to begin with we just figure out how to
> code Elm webcomponents by hand then figure out what bits of that can be
> extracted as helper code to be incorporated into Elm :-)
>
> Also important, configure Polymer with these settings in index.html:
>
> <script>
> window.Polymer = {
> dom: 'shadow',
> lazyRegister: true
> };
> </script>
>
> =======
>
> For your application, how much interaction is there between the web
> components and the main page? I expect from your description that the
> components are fairly self-contained - I think this makes them a reasonable
> candidate for implementing as web components within Elm.
>
> The one problem you may have is if the Elm managed virtual DOM decides to
> re-render your webcomponent, it will be re-initialized and lose its
> internal state. This may not be so much of a problem. The situation where
> it may occur is if you have a list of these components within some div and
> you add another one and the whole div is re-rendered. Html.Keyed will help
> you out here.
>
>
> =======
>
> Peter says you may find dynamically importing the components tricky? I
> don't think it will be so hard, as you can always import the necessary
> stuff inline in the Html body, you don't need to declare all imports
> up-front in the head.
>
>
>
--
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.
