Polymer的双向数据绑定不适用于元素的子级属性值

Question

I have a product-card custom element that looks like this:

<dom-module id="product-card">    
   <template>
    <div class="card-main-content layout horizontal center">
      <content select="img"></content>
      <content select="h3"></content>
      <content select="h4"></content>
    </div>
    <content></content>
    <paper-icon-button id="carticon" icon="add-shopping-cart" on-tap="cartTapped">
    </paper-icon-button>
  </template>
</dom-module>

<script>
(function() {
  Polymer({
  is: 'product-card',

  properties: {
    host: {
      type: String,
      notify:true,
      reflectToAttribute: true,
      value: "http://localhost:3003"
    },
    imagepath: {
      type: String,
      notify: true,
      reflectToAttribute: true
    },
    imageurl: {
      type: String,
      notify: true,
      reflectToAttribute: true,
      computed: 'computeImageUrl(host, imagepath)'
   }
  },

  cartTapped: function(event) {
    /*...............*/
    this.fire('cart-tap');
  },

    computeImageUrl: function(host, imagepath) {
     return host+imagepath;
    }
  });
  })();
</script>

This element is used in another custom element called product-list like this:

<dom-module id="product-list">
  <template>
    <get-products-service products="{{products}}" id="productservice"></get-products-service>
    <div>
      <template is="dom-repeat" items="{{products}}">
        <product-card on-cart-tap="handleCart" imagepath="{{item.master.images.0.small_url}}">
          <img src="{{imageurl}}" width="100" height="100">
          <h3>{{item.name}}</h3>
          <h4>{{item.display_price}}</h4>
       </product-card>
     </template>
    </div>
  </template>
</dom-module>

The problem i have is that the src={{imageurl}} resolves to null. The imageurl is being calculated as i can see the expected values being reflected on the attributes when i inspect with chrome's developer tools. Just to add, when i add an imageurl attribute like this:

<product-card on-cart-tap="handleCart" imagepath="{{item.master.images.0.small_url}}" imageurl="{{imageurl}}">
  <img src="{{imageurl}}" width="100" height="100">
  <h3>{{item.name}}</h3>
  <h4>{{item.display_price}}</h4>
</product-card>

I get a url of the first product's image which does not change as the product's array is iterated on. This results to loading of the same image for all products which is not the desired result.

Answer 1

Good question. Right now I am also struggling to understand how to use binding within the light dom. If I find a solution, I will be sure to post it here.

You could move the image insertion out of the product-list component and into the product-card element. It is not what you are looking for in terms of flexibility, but you get the desired effect.

<dom-module id="product-card">    
<template>
<div class="card-main-content layout horizontal center">
  <img src="{{imageurl}}" width="100" height="100">
  <content select="h3"></content>
  <content select="h4"></content>
</div>
<content></content>
<paper-icon-button id="carticon" icon="add-shopping-cart" on-tap="cartTapped">
</paper-icon-button>
</template>
</dom-module>

Another 'hacky' way of getting your desired result is to set the image src in the ready callback of the lifecycle. Access the image element inside lightdom by using Polymer.dom(this).querySelector('img') and set the src of your computed value. Accessing the lightdom using various selectors is described in Local DOM Basics and API Add the ready function to your product-card element:

Polymer({
  is: 'product-card',
  ready: function() {
      Polymer.dom(this).querySelector('img').src = this.imageurl;
  },
  properties: {
    host: {
      type: String,
      notify:true,
      reflectToAttribute: true,
      value: "http://lorempixel.com/50/50"
    },
...

Answer 2

Try src$="{{imageurl}}" , as this will bind to the src attribute rather than the src property.

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding