Polymer 1.0 - Issue With Displaying Values Inside Template Is="dom-repeat"

Question

While migrating to Polymer 1.0 from 0.5 I have come across an interesting thing. Thought it might help others having similar problem. I have an element where I am using

Solution 1:

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.

Solution 2:

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="{{computeFullName(firstname, lastname)}}">
        Hi, my name is <span>{{firstname}}</span>.
</my-foo>


...

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

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

Baca Juga

EDIT: For node content as well, string concatenation can be done using computed 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 `computeFullName` is called once// (asynchronously) and the value it returns is stored as `fullName`computed: 'computeFullName(first, last)'
      } 

    },

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

    ...

  });
</script>

Solution 3:

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.org/releases/2015/11/02/release-1.2.0/

Solution 4:

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

javascript sammlung