Polymer 1.0 有条件的 dom-repeat 问题

Question

我有一个这样的自定义元素：

<dom-module id="customer-location">
    <template>
      <template is="dom-repeat" items="{{customers}}" filter="isCustomerFound" observe="cuname item.cuname">
        <template is="dom-repeat" items="{{item.branches}}">
          ...
          ...
        </template>
      </template>
    </template>
</dom-module>

这个元素有一个属性cname，其值是从index.html设置的

<customer-location cname="{{params.name}}"></customer-location>

上面的值被很好地转移到customer-location元素中。我可以像<p id="maxp">{{cname}}</p> 一样打印它。

现在，在<script>...</script> 内部，我正在尝试使用函数访问属性cname：

<script>
  (function () {
      Polymer({
          // define element prototype here
          is: 'customer-location',
          properties: {
              latlngcombo: { type: String },
              cname: { type: String }
          },
              
          isCustomerFound: function (item) {
              var dm = this.$$("#maxp").innerHTML;  
              return item.cuname == dm;
          },

          ready: function () {
              this.customers = [
                  { "cuname": "msi", "name": "Microsoft India", "addr": "2, Strand Road", "addr2": "Kolkata, IN", "phone": "332.245.9910", "lat": "22.589091", "lng": "88.352359", "branches": [
                      { "branch": "Hyderabad", "email": "hydho@cyfoxpapers.com", "phone": "1582012244", "address": "69/A, Twisted Road, Banjara Hills, Hyderabad: 600001", "code": "CPHYD" }
                      ]
                  },
                  { "cuname": "googindia", "name": "Google India Inc.", "addr": "6/B, Pragati Apartment", "addr2": "Pitampura, New Delhi, IN", "phone": "493.050.2010", "lat": "28.61598", "lng": "77.244382" },
                  { "cuname": "gabonint", "name": "Gabon Internationl", "addr": "187 Kabi Kirandhan Road", "addr2": "Bhadrakali, IN", "phone": "983.193.3166", "lat": "22.665979", "lng": "88.348134" },
                  { "cuname": "itg", "name": "India Tour Guides", "addr": "115/5 Palash Sarani", "addr2": "Amritsar, India", "phone": "943.390.9166", "lat": "31.604877", "lng": "74.572276" },
                  { "cuname": "creatad", "name": "Creative Ad Agency", "addr": "25 BPMB Saranai", "addr2": "McLeodganj, Dharamsala. IN", "phone": "943.390.9166", "lat": "32.232596", "lng": "76.324327" }
                ];
              }
          });
      })();
</script>

函数isCustomerFound 用于检查当前cname 值是否与外部dom-repeat 循环中的item.cuname 匹配。

但我从来没有从var mm = this.$$("#maxp").innerHTML;获得价值

请告诉我我做错了什么。在另一个类似的元素中，this.$$("#maxp").innerHTML 的值很好！

提前致谢

Answer 1

这是cname 属性被绑定到元素范围之外的结果。发生的情况是，首先创建 <customer-location> 元素并将其标记到 DOM 上，经过 ready、attached 等。然后它接收到 cname 的新值，因为它是通过其父绑定传入的。

dom-repeat 因此首先使用undefined 的cname 值执行isCustomerFound 过滤器，但不知道在cname 更新后重新解析数据。不幸的是，因为cname 不是items 集合的属性，它不能放入observe，因此您必须在外部观察该属性并手动重新触发dom-repeat 过滤。

<dom-module id="customer-location">
    <template>
      <template is="dom-repeat" items="{{customers}}" id="customerList" filter="isCustomerFound" observe="cuname item.cuname">
        <template is="dom-repeat" items="{{item.branches}}">
          ...
          ...
        </template>
      </template>
    </template>
</dom-module>

<script>
  (function () {
      Polymer({
          is: 'customer-location',

          properties: {
              latlngcombo: String,
              cname: String
          },

          observers: [
              '_updateCname(cname)'
          ],

          _updateCname: function(cname) {
              this.$.customerList.render();
          },

          isCustomerFound: function (item) {
              return item.cuname == this.cname;
          },

          ready: function () {
              this.customers = [
                  ...
              ];
          }
      });
  })();
</script>