While migrating to Polymer 1.0 from 0.5 I have e across an interesting thing. Thought it might help others having similar problem.

I have an element where I am using <template is="dom-repeat" items="{{customers}}">...</template>. The problem I am facing is I have to place every single property binding inside a HTML element. The code below what I intended to write:

<template is="dom-repeat" items="{{customers}}">
  <div>
    {{item.name}}<br />
    {{item.addr}}, {{item.addr2}}<br />
    {{item.phone}}
  </div>
</template>

While migrating to Polymer 1.0 from 0.5 I have e across an interesting thing. Thought it might help others having similar problem.

I have an element where I am using <template is="dom-repeat" items="{{customers}}">...</template>. The problem I am facing is I have to place every single property binding inside a HTML element. The code below what I intended to write:

<template is="dom-repeat" items="{{customers}}">
  <div>
    {{item.name}}<br />
    {{item.addr}}, {{item.addr2}}<br />
    {{item.phone}}
  </div>
</template>

But it is only displaying the value for {{item.name}}. The reason is other property bindings are not wrapped within separate HTML tags, they are not displaying at all!

I tried the following but didn't work either:

<template is="dom-repeat" items="{{customers}}">
  <div>
    <p>{{item.name}}</p>
    <span>{{item.addr}} {{item.addr2}}</span>
  </div>
</template>

Means, I put {{item.name}} inside a <p>...</p> tag and placed {{item.addr}} and {{item.addr2}} inside a single <span>...</span> tag.

Then I went on and put every single property binding wrapped by their own HTML tags like the following:

<template is="dom-repeat" items="{{customers}}">
  <div>
    <p>{{item.name}}</p>
    <span style="display:block">{{item.addr}}, <span>{{item.addr2}}</span></span>
    <span style="display:block;">{{item.phone}}</span>
  </div>
</template>

and it works!!

I truly have no idea whether it is a bug of 1.0 or there is something I am doing wrong! If anybody knows the answer please help.

Thanks in advance

• javascript
• polymer
• polymer-1.0

• 1 String concatenation is not supported inside a tag, and the tag can’t contain any whitespace. polymer-project/1.0/docs/devguide/… – Neil John Ramal Commented Jun 2, 2015 at 15:27
• Thanks for your quick reply. So that means I cannot bind more than one property values inside one tag? However it was possible in 0.5. Is this a a new rule set in 1.0? – Subrata Sarkar Commented Jun 2, 2015 at 15:33
• Not a rule actually. Because 0.8 was a total rewrite, some things were not added back. This was one of those. But this is only temporary as string concatenation will be brought back post 1.0. It's in their current roadmap. – Neil John Ramal Commented Jun 2, 2015 at 15:51
• That would be nice actually :) – Subrata Sarkar Commented Jun 2, 2015 at 16:01

4 Answers 4

You're not doing anything wrong. With the introduction of Polymer 0.9 (and later 1.0) data-binding to the content of text nodes only works if you wrap everything into its own element.

See the Polymer documentation:

The binding annotation must currently span the entire content of the tag

So you have to remove all whitespace and other characters for it to work.

Example from the documentation:

<!-- this works -->
<template>   
  First: <span>{{first}}</span><br>
  Last: <span>{{last}}</span>
</template>

<!-- Not currently supported! -->
<div>First: {{first}}</div>
<div>Last: {{last}}</div>

<!-- Not currently supported! -->
<div>
  {{title}}
</div>

Edit

As of Polymer 1.2, the issue described in the question is no longer problematic / erroneous. Compound bindings now work, see release notes on the Polymer blog.

Just a heads up, for element attributes though you can use something like a helper function for string concatenation. Here's an example.

<my-foo fullname="{{puteFullName(firstname, lastname)}}">
        Hi, my name is <span>{{firstname}}</span>.
</my-foo>


...

puteFullName: function(first, last) {
  return first + ' ' + last;
}

And here's the link: https://www.polymer-project/1.0/docs/migration.html#data-binding

EDIT: For node content as well, string concatenation can be done using puted properties (I call them helper functions). Here's an example,

<dom-module id="x-custom">
  <template>
    My name is <span>{{fullName}}</span>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'x-custom',

    properties: {

      first: String,

      last: String,

      fullName: {
        type: String,
        // when `first` or `last` changes `puteFullName` is called once
        // (asynchronously) and the value it returns is stored as `fullName`
        puted: 'puteFullName(first, last)'
      } 

    },

    puteFullName: function(first, last) {
      return first + ' ' + last;
    }

    ...

  });
</script>

With Polymer 1.2 you example code will actually work. Binding annotations no longer need to span the entire tag.

Example:

<div>first name: [[name.first]] last name: [[name.last]]</div>

https://blog.polymer-project/releases/2015/11/02/release-1.2.0/

You'll want to use a puted property to bine values. Search for them on this page https://www.polymer-project/1.0/docs/devguide/properties.html