Polymer 1.0 paper-tabs不完全支持阵列拼接

时间:2015-07-30 12:57:51

标签: polymer polymer-1.0

当删除数组项并在模型数组上的一个拼接中添加另一个时,paper-tabs只是从DOM中删除已删除的项而不添加新项。 请看一下:

<!doctype html>
<html>

<head>
  <title>paper-tabs-splicing-problem</title>
  <meta name="description" content="When array item is removed and another one is added in one splice on model array, paper-tabs just removes removed item from DOM without adding a new one.">
  <script src="https://rawgit.com/EdVaIl/polymer/master/dist/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://rawgit.com/EdVaIl/polymer/master/dist/bower_components/paper-tabs/paper-tabs.html">
</head>

<body>
  <template is="dom-bind" id="app">
    <template is="dom-repeat" items="[[items]]">
      <div>[[item]]</div>
    </template>
    <paper-tabs scrollable>
      <template is="dom-repeat" items="[[items]]">
        <paper-tab>[[item]]</paper-tab>
      </template>
    </paper-tabs>
  </template>
  <script>
    (function(document) {
      'use strict';
      var app = document.querySelector('#app');
      app.addEventListener('dom-change', function() {
        app.items = ['square', 'circle', 'pillow', 'triangle'];
      });
      window.addEventListener('WebComponentsReady', function() {
        app.splice('items', 2, 1, 'line');
      });
    })(document);
  </script>
</body>

</html>

1 个答案:

答案 0 :(得分:0)

您可能需要使用Polymer Array Mutation方法。见polymer array mutation docs