Полимерный шаблон if с фильтром: фильтр не обновляется

Я использую шаблон if для отображения или скрытия элементов в списке внутри элемента Polymer. Мой шаблон основан на списке значений и отфильтрован с использованием списка ссылок.

Обновление списка значений дает желаемый эффект. Однако изменение списка ссылок фильтра (здесь удаление одного элемента) не приводит к обновлению шаблона.

<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/polymer.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <test-component></test-component>
</body>
</html>

<polymer-element name='test-component' attributes='itemlist filterlist'>
  <template>
    <style>
    </style>
    <table id='table'>
      <tr template repeat="{{item in itemlist}}">
        <template if="{{item | applyFilter(filterlist)}}">
          <td>test</td>
        </template>
      </tr>
    </table>
    <input type='button' value='remove 1 element' on-click={{clicked}}></input>
    <div id='msg'></div>  
  </template>
  <script>
    Polymer('test-component', {
      itemlist: [1,2,3],
      filterlist: [1,2],
      applyFilter: function(item, filterlist) {
        var test = false;
        if (filterlist) {
          filterlist.forEach(function(filteritem) {
            test = test || ((new RegExp(filteritem)).test(item));
          });
        }
        return test;
      },
  clicked: function() {
    this.$.msg.innerHTML = 'Filter list was ' + this.filterlist;
    this.filterlist.splice(1,1);
    this.$.msg.innerHTML += ', now it\'s ' + this.filterlist;
  }
});

См. http://jsbin.com/vuvikare/4/edit?html,output для исполняемого кода.

Есть ли способ запустить это обновление (например, с помощью наблюдателя filterChanged)?

Спасибо


filter web-component templates polymer
person Ahrrrin Jon    schedule 14.05.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это очень хак, но я заставил его работать, добавив этот метод :

filterlistChanged: function() {
  Array.prototype.forEach.call(this.$.table.querySelectorAll('template[if]'), function(t) {
    t.iterator_.updateIteratedValue();
  });
},

По сути, он находит все внутренние элементы шаблона в таблице и принудительно обновляет их (используя приватный метод).

person CletusW    schedule 15.05.2014
comment
Вы также можете немного упростить разметку, что устранит необходимость в цикле в filterListChanged: jsbin .com/vuvikare/12/edit?html, вывод - person CletusW; 15.05.2014
comment
Теперь я вспомнил, почему меня всегда впечатляли хакеры... Большое спасибо за это - person Ahrrrin Jon; 15.05.2014