Polymer 1.0 - Issue with displaying values inside template is=“dom-repeat”

问题

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 <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

回答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.

回答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

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>

回答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/

回答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

来源：https://stackoverflow.com/questions/30600115/polymer-1-0-issue-with-displaying-values-inside-template-is-dom-repeat

标签

javascript

polymer

polymer-1.0