Polymer 聚合物中的变量更新我的目标_Polymer_Polymer 1.0

Polymer 聚合物中的变量更新我的目标

polymer

Polymer 聚合物中的变量更新我的目标,polymer,polymer-1.0,Polymer,Polymer 1.0,我想通过按清除按钮从项属性（2d数组）中删除所有1值重新创建问题的步骤打开这个jsBin 在“输出”窗格中，按“显示”按钮查看控制台，注意记录的输出： “项目：Lorem、Ipsum、foo、1、bar、1、baz、0、qux、0” 在输出窗格中，按清除按钮查看控制台，注意记录的输出与之前相同： “项目：Lorem、Ipsum、foo、1、bar、1、baz、0、qux、0” 我期望看到的是。。。在上面描述的最后一步中，在控制台中，我希望看到以下内容被记录到控制台中： Lorem,Ip

我想通过按清除按钮从

项

属性（2d数组）中删除所有

值

重新创建问题的步骤

打开这个jsBin

在“输出”窗格中，按“显示”按钮

查看控制台，注意记录的输出：

“项目：Lorem、Ipsum、foo、1、bar、1、baz、0、qux、0”

在输出窗格中，按清除按钮

查看控制台，注意记录的输出与之前相同：

“项目：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与记录的值之间缺乏一致性。（由于下文所述的原因，此问题并非重复。）

问题: 如何将

项

变量的值成功更新为：

['Lorem'，'Ipsum']，['foo'，0]，'bar'，0]，'baz'，0]，'qux'，0]

（如有可能，请显示一个正在工作的jsBin。）

代码 http://jsbin.com/wabebituvi/edit?html，控制台，输出

<!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>


显示
清楚的
{{selected}}
{{items}}
（功能（）{
聚合物({
是‘x元素’，
特性：{
项目：{
类型：数组，
通知：正确，
reflectToAttribute:true，
已计算：“_computeItems（selected）”，
值：函数（）{
返回['Lorem'，'Ipsum']，['foo'，0]，'bar'，0]，'baz'，0]，'qux'，0]，]；
}
},
选定：{
类型：数组，
通知：正确，
reflectToAttribute:true，
值：[]，
},
},
_计算机项：函数（a）{
var out=this.items，
selectedLength=a.length，
i=伸出长度；
而（i--1）{
var j=所选长度；
而（j--）{
if（a.indexOf（out[i][0]）=-1）{
out[i][1]=0；
}
else if（a.indexOf（out[i][0]）>-1）{
out[i][1]=1；
}
否则{
log（'错误：未定义所选项目的索引'）；
}
}
}
返回；
},
_computeSelected:函数（a）{
var out=[]，
i=a.长度；
而（i--1）{
if（a[i][1]）{out.push（a[i][0]）；}
}
return out.sort（）；
},
就绪：函数（）{
this.set（'items'，this.\u computeItems（this.selected））；
},
clearAll:function（）{
此.set（'selected'，[]）；
this.set（'items'，this.\u computeItems（this.selected））；
},
_show:function（）{
console.log（'Selected:'+this.Selected）；
console.log（'Items:'+this.Items）；
},
});
})();

此问题不重复的原因：

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

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

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

阻止它

在我看来，您的_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"

看起来和你的问题一样。请更新第一个问题，而不是创建新问题。请将代码简化为一个最小的示例。我注意到了您在问题主体中提到的问题。代码类似，但不相同。这些问题也是相似但不同的。我怀疑，解决方案可能是相关的，可能是我不理解的结果。另一种选择是：在一篇文章中同时提出这两个问题，我担心这太复杂了，无法得到有效的答案。因此，我选择尝试将问题分为不同的问题，以帮助其他人理解并提供更清晰的答案。最后，我试图提供一个简单的例子。我删减了很多代码。我想如果一个问题得到了回答，那么另一个问题的答案就会变得显而易见。@GünterZöchbauer：我同意这是一种极有可能的情况。无论谁回答都会得到双倍的分数@Mowzer当我打开你的jsbin时，控制台中有一大堆错误。这正常吗？

"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"