Polymer 1.0 Conditional dom-repeat issue

Question

I have a custom element like this:

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

This element has a property cname the value of which is set from index.html

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

The above value is transferred fine into customer-location element. I can print it like <p id="maxp">{{cname}}</p>.

Now, inside <script>...</script> I am trying to access the property cname using a function:

<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": "[email protected]", "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>

The function isCustomerFound is intended to check whether current cname value matches with the item.cuname at the outer dom-repeat loop.

But I am never getting the value from var mm = this.$$("#maxp").innerHTML;

Please tell me what I am doing wrong. In another similar element this.$$("#maxp").innerHTML is getting the value fine!

Thanks in advance

Answer 1

This is a result of the cname attribute being bound outside of the scope of the element. What's happening is that first the <customer-location> element is created and stamped onto the DOM, going through ready, attached, etc. THEN it receives the new value of cname as it is passed in via its parent's bindings.

The dom-repeat therefore first executes the isCustomerFound filter using an undefined value for cname, but does not know to re-parse the data after cname is updated. Unfortunately because cname is not a property of the items collection it can't be put into observe, so you will have to observe the property externally and manually-retrigger the dom-repeat filtering.

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