CODEWITHSUNDEEP
javascripthtmlpolymerweb-component
tomalec
tomalec

Reputation: 900

Does Polymers template auto-binding break model property?

I'm trying to use <template is="auto-binding"> to use Polymer Expressions inside my template.

As for any other <template bind> I activate a template, by attaching model property, as described at Polymer Docs

My code looks as follows:

<template id="root"  is="auto-binding">
    List
    <ul>
    <template repeat="{{ item in list }}">
        <li>{{item.desc}}</li>
    </template>
    </ul>
</template>
<script type="text/javascript">
    var template = document.getElementById( "root" );

    template.model = {
      "list": 
          [{
            "desc": "first"
          }, {
            "desc": "second"
          }]
      };
</script>

JSBin here, as you can see here jsbin.com/fibuc/1/quiet it does not work. (Chrome Canary, Chrome Stable, IE, Firefox).

It seems that, if I assign list directly to template it works: http://jsbin.com/fibuc/3/quiet

template.list = 
  [{
    "desc": "first"
  }, {
    "desc": "second"
  }, {
    "desc": "third"
  }];

What is really weird, it still works with .model if I delay attaching a bit: http://jsbin.com/fibuc/2/quiet

setTimeout( function () {
  template.model = {
    "list": 
      [{
        "desc": "first"
      }, {
        "desc": "second"
      }, {
        "desc": "third"
      }]
    };
  },1000);

Is it a bug, or am I doing something wrong?

Edit: If possible, I would like to keep the script unaware of way template was used: <template bind> or <template is="auto-binding">. In my case script code is inside Custom Element puppet-js that only provides data from server to given node, and the outer application is responsible to create templates.

Upvotes: 1

Views: 1308

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56044

The best set of docs for <template is="auto-binding"> are at http://www.polymer-project.org/docs/polymer/databinding-advanced.html#autobinding

The examples there illustrate setting the bound variables on the <template> directly, rather than going through the model. It's what you would do if you were using the template from within a Polymer element, and I believe the idea is to maintain that usage pattern rather than interacting with the model like you would with a non-auto-binding <template>.

That being said, if you do want to set the model, what seems to work is to do so after the template-bound event is fired—your setTimeout() was approximating that, but it's obviously cleaner to just listen for that event. Here's an example (jsbin):

  var template = document.getElementById("root");
  template.addEventListener('template-bound', function() {
    template.model = {
      "list": [
        {"desc": "first"},
        {"desc": "second"},
        {"desc": "third"}
      ]
    };
  });

EDIT: Looking at the relevant source code, it appears that ignoring the model property of the <template> initially is intentional, and it gives some insight as to why setting model after template-bound works if you really want to do that.

Upvotes: 4

Related Questions