Javascript 聚合物&x27；s双向数据绑定在元素'；s儿童'；属性值

我有一个

产品卡

自定义元素，如下所示：

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

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

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

我遇到的问题是

src={{imageurl}}

解析为null。正在计算

imageurl

，因为当我使用chrome的开发工具进行检查时，可以看到期望值反映在属性上。只是为了添加，当我添加一个

imageurl

属性时，如下所示：

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

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

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

{{item.name}
{{item.display{u price}}

我得到了第一个产品图像的url，它不会随着产品数组的迭代而改变。这将导致加载所有产品的相同图像，这不是期望的结果

尝试

src$=“{{imageurl}}”

，因为这将绑定到

src

属性，而不是

src

属性

---

好问题。现在我也在努力理解如何在LightDOM中使用绑定。如果我找到了解决方案，我一定会把它贴在这里

您可以将图像插入移出产品列表组件，并移动到产品卡元素中。这并不是你想要的灵活性，而是你得到了想要的效果

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

---

这仅在元素上的

imageurl

属性不是动态的情况下有效。i、 e当我执行

`

操作时，

imageurl

不是动态计算的，数组中所有项目的值都相同，

src

属性设置为该值。但是当我执行

`

时，

imageurl

会按照我想要的方式动态计算，但是

src

属性的值为空。我不知道为什么会发生这种情况。它应该是

src$=“{{item.imageurl}}”

？

imageurl

是

host

属性和

item.url

的计算属性。项目中的内容是路径，例如：

/images/productId.jpg

。

imageurl

属性由

host

+

imagepath

计算。例如，如果

主机
为
”http://localhost:3003“
和
imagepath
（即
item.url
）是
”/images/1.jpg“
图像url
应该是
”http://localhost:3003/images/1.jpg"
这是我在
src
属性中所期望的值。我对polymer和整个web组件概念仍然非常陌生，因此我仍在努力理解各种DOM。我本想把这个图像放在dom发行版中，但你的回答解决了我眼前的问题。那么，我回答的第二部分可能适合你。只需将ready函数添加到产品卡，并设置图像的src。通过这种方式，您可以像在初始解决方案中一样添加图像。谢谢，我避免了第二种方法，因为您说它“有黑客行为”，但我已经测试过，效果很好。我刚刚发现如何更有效地访问lightdom元素。您可以使用Polymer.dom（this.querySelector（'img'）.src=this.imageurl，而不是在ready函数中使用'this.firstElementChild.firstElementChild.src=this.imageurl'设置图像标记的src。这将从lightdom中选择图像标记，并将src设置为您的计算值。我已经更新了我的答案。这看起来更简洁，而且我不必担心在
img
元素上方添加更多元素。