Polymer js: binding event handlers

[__]

Hi guys,

I’ve been messing around with the Polymer Project, making an “editable” element. Problem I’m having is binding event handlers to buttons inside the repeating template:

<template repeat="{{editorTools}}">
    <core-icon-button
        icon="{{icon}}"
        on-tap="{{act}}"
        title="{{tip}}"
    ></core-icon-button>
</template>

…where editorTools is similar to

editorTools: [
    { 
        icon:"editor:bold", 
        tip:"make selection bold", 
        act:function(){ document.execCommand('bold'); } 
    }
    //  etc.  ...
];

Both the icon and title bindings work perfectly, so I know polymer is finding the correct items in its model. Further, calling the act functions from the console (e.g., document.getElementById('my-editable').editorTools[0].act()) works as expected, so I know there’s nothing wrong with the handlers themselves.

Any insights? Appreciate it!

[__]

…no one knows… : (

@shaneisme, did you ever do anything with polymer? any ideas on this?

[shaneisme]

Sorry mate – I haven’t gotten that far, I’m still picking apart the demos.

[nixnerd]

I have absolutely nothing to contribute here. But I just wanted to say congrats on your 6th topic started!

[__]

Thanks anyway.

…I’m still picking apart the demos.

Just FYI, you’re going to be picking apart the source code pretty soon. The docs aren’t that great, and the demos are decent but have a fairly narrow focus.

[__]

Well, I’ve managed to get the event handlers bound. It’s a really ugly workaround, though: I had to make a list of the editorTools keys, and then bind to a “proxy” function that calls the actual handler. Along the way, I figured out that polymer templates won’t iterate over objects (only arrays). Kinda puts a cramp in your code.

I’m not sure if I’m going to finish this. I don’t think it will be a practical tool until IE9 is gone. It feels very heavy, too (and every import makes it even worse—they’re not native in most browsers, and the polyfill is a lot of string parsing + ajax. It’s just sluggish).

I’m looking at how polymer’s node.bind works. It’s a standalone module. If I can get a reasonable fallback for data binding, I think the rest of it can be done with plainer javascript. Declarative is nice, but I like programming.

[__]

I’ve been comparing how polymer does things with Mozilla’s xtags.

Overall, xtags seems lighter and more modularly designed… but it doesn’t do data binding (not in a pre-packaged {{}} way, anyway: it polyfills object.observe, so you could build your own), which is a huge plus for polymer, IMO. And neither framework is completely compatible with IE9-, so that’s another draw.

Guess I’ll just have to bite the bullet.

[shaneisme]

Yeah, I’ve had a few quandaries about this myself…

I think I’m going to spend my time on Meteor instead, I keep coming back to that. If I have a good backend going, adding templates into the Shadow-DOM will be something I can put in as its own module, to me that makes perfect sense once all the dust settles. I know Google is using things like Dart and Polymer in production right now, but I’m not quite at their level…

Now, to think of some random, fun project to get my creative juices flowing.

[__]

Until now, I have made javascript modules that scan the document for particular data-* attributes and the augment/modify those elements in some way. For example, the first time I figured this out was when I used a data-xhr-get attribute to declaratively load content via ajax. I’ve used the concept to initialize slideshows, and do similar tasks.

This is entirely adaptable to creating templates/behaviors for custom elements. It would be a lot of work, “re-inventing” stuff that google/mozilla have already done, but it would also be lighter, have a wider browser compatibility, and be much more suited to being a minor “add-on” to sites… I would lose the shadow dom, but that’s only supported in Chrome ATM. Everywhere else, it polyfills with a light dom anyway.

I would not be re-creating <template> or document.register or HTML imports; I’d just use normal JS for templating, add behavior through event handlers, and use requirejs for loading/dependencies.

So, long story short, polymer is cool… but I think we still need to wait for real web components.

[shaneisme]

So, long story short, polymer is cool… but I think we still need to wait for real web components.

Yes, I have come to the same conclusion. Polyfills are nice and all, but generally speaking I like waiting for spec.

[Author]

Posts