Custom Binding inside an element

[Bobby Schultz]

Custom binding isn't working inside an element the scoping is off. The only "name" parameter that gets passed in is "bind". The variables inside the template never get passed into the getBinding function. The only change I made to the sample code was to get a reference to the template vis "this.element" when inside the ready function. Has anyone had success with custom bindings inside an element?

bobby

<polymer-element name="report-card" constructor="ReportCard" attributes="cards">

<template id="example" bind syntax="MyCustom">

  <span>Amount: <input value="{{ value }}">, Twice Amount: {{ 2x: value }}</span>

</template>

<script>

  Polymer('report-card',{

    model:{value:10},

    ready:function()

    {

      var t = this.element.querySelectorAll('template')[0];

      t.bindingDelegate = {

          getBinding: function(model, path, name, node) {

            // name is "bind"

            var twoXPattern = /2x:(.*)/

            var match = path.match(twoXPattern);

            if (match == null)

              return;

            path = match[1].trim();

            var binding = new CompoundBinding(function(values) {

              return values['value'] * 2;

            });

            binding.bind('value', model, path);

            return binding;

          }

        }

        

        t.model = {

          value:10

        };

        

        Platform.performMicrotaskCheckpoint();

    }

  });

</script>

</element>

  

[Steve Orvell]

Polymer creates ShadowDOM from the template that's inside a polymer-element. You can use the instanceTemplate method to customize how this is done.

    instanceTemplate: function(template) {

      var mySyntax = {

          getBinding: function(model, path, name, node) { ... }

      };

      return template.createInstance(this, mySyntax);

    }

Here's a slightly more complex example which may be interesting. A nested template is used and the syntax and model is set only for the nested template.

http://jsbin.com/inavuk/3/edit

--
 
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
Visit this group at http://groups.google.com/group/polymer-dev.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/e11841bb-8032-4a3e-b58e-f1bb3344c5fc%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.