聚合物template.render（）不可靠

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

当我重新计算每个商店的距离（运行_stores trough calculateDistance）时，我想通过调用_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(); 
    }

来源

2017-04-25 Riël

你需要真正使这个列表进行任何动作使用的计算性能优势，为重新呈现你的名单？你的阵列上的任何变化应该是可见的 – Kejt

我也这么认为。我看到我使用原生JavaScript数组突变。这就是我称之为渲染的原因。奇怪的是，有时候会渲染！我发现了一个解决方法，创建一个空的对象： –

我对_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>

来源

2017-04-25 07:28:56 Kejt

这工作得很好，但似乎将拼接插入模板填充我的控制台（最终它呈现:) polymer-micro.html：277 [dom-重复:: dom重复]：期望的数组项目，找到对象{keySplices：Array（1），indexSplices：Array（1）} –

och抱歉，那么它不应该是stores.value也许:)）结帐这个对象，你会看到什么使用 – Kejt

实际上，经过一些更多的研究后，我发现列表中的距离值没有更新，如果列表本身没有改变：即使是你的修复。该列表按距离排序，但当距离改变但排序保持相等时，聚合物未显示新距离。只有当我强制对其他标签/过滤进行不同的排序。 –

聚合物template.render（）不可靠

回答

相关问题