问题

Question

我的目标

我想通过按清除按钮从1属性（2d数组）shown in this jsBin中删除所有items值。

重新创建问题的步骤

打开此jsBin。
在输出窗格中，按显示按钮。
查看控制台，注意记录的输出：

"Items: Lorem,Ipsum,foo,1,bar,1,baz,0,qux,0"
在输出窗格中，按清除按钮。
查看控制台，注意记录的输出与以前相同：

"Items: Lorem,Ipsum,foo,1,bar,1,baz,0,qux,0"

我期待看到的......

在上面描述的最后一步中，在控制台中，我希望看到以下内容登录到控制台：

Lorem,Ipsum,foo,0,bar,0,baz,0,qux,0

我实际看到的......

相反，如上所述，我看到了：

Lorem,Ipsum,foo,1,bar,1,baz,0,qux,0

请注意屏幕上呈现的HTML与记录的值is addressed by this SO question之间缺乏一致性。（由于下述原因，这个问题不重复。）

问题

如何成功将items变量的值更新为：

[['Lorem','Ipsum'],['foo',0],['bar',0],['baz',0],['qux',0]]？

（如果可能的话，请出示有效的jsBin。）

代码

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">

</head>
<body>

<dom-module id="x-element">

<template>
  <button on-tap="_show">Show</button>
  <button on-tap="clearAll">Clear</button>
  <div>{{selected}}</div>
  <div>{{items}}</div>
</template>

<script>
  (function(){
    Polymer({
      is: 'x-element',
      properties: {
        items: {
          type: Array,
          notify: true,
          reflectToAttribute: true,
          computed: '_computeItems(selected)',
          value: function() {
            return [['Lorem', 'Ipsum'], ['foo', 0], ['bar', 0], ['baz', 0], ['qux', 0],];
          }
        },
        selected: {
          type: Array,
          notify: true,
          reflectToAttribute: true,
          value: [],
        },
      },
      _computeItems: function(a) {
        var out = this.items,
            selectedLength = a.length,
            i = out.length;
        while(i---1){
          var j = selectedLength;
          while(j--) {
            if(a.indexOf(out[i][0])===-1){
              out[i][1] = 0;
            }
            else if(a.indexOf(out[i][0])>-1){
              out[i][1] = 1;
            }
            else {
              console.log('Error: Undefined index of selected item');
            }
          }
        }
        return out;
      },
      _computeSelected: function(a) {
        var out = [],
            i = a.length;
        while(i---1){
          if(a[i][1]){out.push(a[i][0]);}
        }
        return out.sort();
      },
      ready: function(){
        this.set('items', this._computeItems(this.seletcted));
      },
      clearAll: function() {
        this.set('selected', []);
        this.set('items', this._computeItems(this.selected));
      },
      _show: function() {
        console.log('Selected: ' + this.selected);
        console.log('Items: ' + this.items);
      },
    });
  })();

</script>

</dom-module>

<x-element
  selected='["foo","bar"]'
></x-element>

</body>

此问题不重复的原因：代码类似，但不一样。问题也类似但不同。我怀疑，解决方案可能是相关的，可能是我不理解的结果。另一种选择：在一个帖子中提出这两个问题，我担心会因为太复杂而无法获得有效答案。因此，我选择尝试将问题分成单独的问题，以帮助其他人理解并提供更清晰的答案。最后，这是我尝试提供一个最小的例子。我已经删除了很多代码

Answer 1

你的jsbin中的代码给我一个错误：

"TypeError: Cannot set property items of #<x-element> which has only a getter

我不得不发表评论：

this.set('items', this._computeItems(this.selected));

停止它。

从我看到的情况来看，你的_computeSelected函数永远不会清除，因为在将selected设置为[]之后，selectedLength等于0并且你的内部循环从不进行计算。

我添加了一些代码，在进入while循环之前将这些计数器重置为0，它似乎有效：

_computeItems: function(a) {
    var out = this.items,
        selectedLength = a.length,
        i = out.length;
    out.forEach(function(pair) {
      if (Number.isInteger(pair[1])) {
        pair[1] = 0;
      }
    });
    while(i---1){
      var j = selectedLength;
      while(j--) {
        if(a.indexOf(out[i][0])===-1){
          out[i][1] = 0;
        }
        else if(a.indexOf(out[i][0])>-1){
          out[i][1] = 1;
        }
        else {
          console.log('Error: Undefined index of selected item');
        }
      }
    }
    return out;
  },

控制台输出：

"Selected: foo,bar"
"Items: Lorem,Ipsum,foo,1,bar,1,baz,0,qux,0"
"Selected: "
"Items: Lorem,Ipsum,foo,0,bar,0,baz,0,qux,0"

更新Polymer

我的目标

重新创建问题的步骤

我期待看到的......

我实际看到的......

问题

代码

1 个答案: