Computed bindings in auto-binding templates in Polymer 1.0

Question

How can I define computed bindings in auto-binding templates (i.e. those declared as <template is='dom-bind'>...</template>)?

Occasionally

Answer 1

Simply assign the computed binding directly to the template element via a script, making sure that the involved properties are initialized after the definition of the computed binding.

Example:

<template is="dom-bind">
  <div>
    <input value="{{text::input}}">
  </div>
  <div>[[describe(text)]]</div>
</template>

<script>
  (function() {
    var template = document.querySelector('template[is="dom-bind"]');

    template.describe = function(text) {
      if (text) {
        return 'You entered "' + text + '", which is ' + text.length + ' characters long.';
      } else {
        return 'You didn\'t even enter a thing! Shame on you.';
      }
    };

    template.text = '';
  })();
</script>

Scutt

This works, except that the binding occurs after the rendering occurs. As a result, if I initialize template.text = 'initial text'; right after var template = document.querySelector('...');, the computed binding is not rendered right away: I get a warning in the console output [dom-bind::_annotatedComputationEffect]: compute method 'describe' not defined. However, the binding does occur by the time I start typing in the input box. Any thoughts on this? – Occasionally

@es_code, I went ahead and copied the code above locally and ran it to try and catch the problem; unfortunately (or fortunately?) I didn't get any warnings/errors in the console in both Chrome and Firefox. Here is the exact code that I tested. Could you provide a few more details about the environment you're seeing the warning in? I'd also recommend updating to the latest minor versions of Polymer and the WebComponents.js polyfill just to eliminate any question of versions out of the problem. I'm curious to try and replicate this! – Scutt

take a look. I added a setTimeout delay to your javascript code to simulate the environment I am dealing with. The point here is that it may take some time from the time the is="dom-bind" element is declared until the execution the code that defines describe. In a regular polymer element this is not an issue because all the necessary bindings happen in a timely manner. (I also added template.text = 'initial text'; to make it clear that the computed binding is not computed initially. Look for the [dom-bind::_ ... method 'describe' not defined warning.) – Occasionally

@Occasionally Hm. I think I get what you're getting at now. Though, why would the computed binding definition be set after the property's value has been set? That would be akin to calling a function before defining it. Could you describe the use-case here a bit more in depth? I understand the delay you're describing, but what I'm getting at is why is there a delay in the first place? If the binding is set immediately after the <template> definition in the HTML document, there shouldn't be any issue as it will get executed before the document is loaded, which is when Polymer stamps templates. – Scutt

I thought I might also throw in a point of reference, as this is the general pattern used by the Polymer developers (or at the least it's what I've noticed so far). In this example, the template's event handlers are being defined in the same manner as the computed binding above. But, as stated before, I think if I can better understand your use-case, I can better figure out a solution (or at least it might end up as a valuable bug report!) Unless of course, someone's already in the know! – Scutt

Good point @Vartan. All properties involved in computed bindings should be initialized after the computed binding is defined to avoid situations like the one described in the comment above. I can't think of a use-case where the computed binding needs to be defined after the property's value has been set. – Occasionally

I'm glad that answered your question, @es_code. But if you do think of a use-case that I've failed to consider, I'd love to hear it (and I'm sure the guys and gals behind Polymer would love to as well). :) Cheers! PS: Noticed the edit - muchas gracias! – Scutt