Question

我以简化形式使用以下代码。我有一个模板，显示来自_stores数组的商店列表。根据应用程序中设置的其他一些属性，_sort和_filter函数可以很好地完成各自的工作，并显示我想要查看的列表。

当我重新计算每个商店的距离（通过calculateDistance运行_stores）时，我想通过调用_search（）来重新呈现商店列表，这会调用Polymer .render（）函数。

此调用不可靠：有时它会呈现，有时不会。它发生在桌面和移动，Safari和Android上，所以看起来它是一个聚合物问题。我找不到导致这种情况的原因。有什么想法吗？

 <template id="storeList" is="dom-repeat" items="{{_stores}}" sort="_sort" filter="_filter">
      <div class="search_result">
        <div class="picture">

          <div class="logo" hidden$="{{!item.logo.length}}">
            <div class="centered">
              <img src$="{{item.logo}}" alt="logo" />
            </div>
          </div>....
</template>


<script>
Polymer({
  is: 'user-store-search-page',

  properties: {
    ...
    _stores: Array
    ...
    },
    _calculateDistance: function () {
       this._stores.forEach(s) {
           //do stuff per store

       }
    },
    _filter: function (store) {
         //do filtering stuff
    },
    _sort: function (a, b) {
         //sort stuff
    },
    _search: function () {
        this.$.storeList.render();
    }

Answer 1

我会使用计算属性优势在_stores数组上执行的任何操作上重新呈现列表：）

 <template id="storeList" is="dom-repeat" items="[[_displayStores]]" sort="_sort" filter="_filter">
  <div class="search_result">
    <div class="picture">

      <div class="logo" hidden$="{{!item.logo.length}}">
        <div class="centered">
          <img src$="{{item.logo}}" alt="logo" />
        </div>
      </div>....
</template>


<script>
Polymer({
  is: 'user-store-search-page',

  properties: {
    ...
    _stores: Array,
    _displayStores: {
      type: Array,
      computed: '_computeStoresToDisplay(_stores.*)'
    }
    ...
    },
    _computeStoresToDisplay: function(stores) {
      return stores.value;
    },
    _calculateDistance: function () {
       this._stores.forEach(s) {
           //do stuff per store

       }
    },
    _filter: function (store) {
         //do filtering stuff
    },
    _sort: function (a, b) {
         //sort stuff
    },
    _search: function () {
        this.$.storeList.render();
    }
</script>

Polymer template.render（）不可靠

1 个答案: