Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Polymer js: binding event handlers

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #181561
    __
    Participant

    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!

    #181799
    __
    Participant

    …no one knows… : (


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

    #181851
    shaneisme
    Participant

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

    #181852
    nixnerd
    Participant

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

    #181853
    __
    Participant

    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.

    #181961
    __
    Participant

    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.

    #182063
    __
    Participant

    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.

    #182160
    shaneisme
    Participant

    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.

    #182182
    __
    Participant

    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.

    #182218
    shaneisme
    Participant

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.