基于数组突变事件和另一个属性定义 Polymer 计算属性

Question

我正在尝试定义一个计算聚合物属性，该属性取决于数组突变事件和另一个自定义属性。由于某种原因，聚合物没有调用计算函数，但是当我删除两个依赖项中的一个时，一切都像魅力一样工作。

item: {
    type: Object,
    value: {
        votes: []
    }
},
authId: {
    type: String,
    value: '123'
},
voted: {
    type: Boolean,
    notify: true,
    computed: 'computeVoted(item.votes.*, authId)'
}

编辑：由于一些误解而更新了示例

Answer 1

对我来说很好用。你发现下面sn-p的不同了吗？

Polymer({
  is: 'my-elem',
  
  properties: {
    prop: {
      type: String,
      value: 'prop'
    },
    array: {
      type: Object,
      value: {
        items: []
      }
    },
    computed: {
      computed: 'compute(array.items.*, prop)'
    }
  },
  
  mutateArr: function() {
    this.push('array.items', 'arr');
  },
  
  compute: function(arr, prop) {
    return prop + ';' + arr.base.length;
  }
});

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

<body>
  <my-elem></my-elem>
  
  <dom-module id="my-elem">
    <template>
      <input type="button" value="Mutate array" on-tap="mutateArr" />
      <input type="text" value="{{prop::input}}" />
      <br/>
      <span>{{computed}}</span>
    </template>
  </dom-module>

</body>
</html>

Answer 2

这是您要实现的目标的运行示例。始终建议初始化设置了observers 或comptuted 的值。

<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">

<dom-module id="button-group">
  <template>
    <style></style>
    <div on-tap='changeAuthId'>Change AuthId</div>
    <div on-tap='changeItem'>Change item</div>
    {{voted}}
  </template>
</dom-module>
<script>
  Polymer({
    is: 'button-group',
    properties: {
      item: {
        type: Object,
        value: function() {
          return {
            votes: [{
              one: 'one'
            }, {
              two: 'two'
            }]
          }
        }
      },
      authId: {
        type: String,
        value: 'test'
      },
      voted: {
        type: String,
        notify: true,
        computed: 'computeVoted(item.votes.*,authId)'
      }
    },
    computeVoted: function(firstVal, authId) {
      //firstVal will be an Object containing three variables 
      //base: which will have item.voted object
      //path: which will contain path of changed value/s
      //value: which will contain new value/s
      return 'Path for changed value: ' + firstVal.path + ' AuthId: ' + authId
    },
    changeAuthId: function() {
      this.authId = "new id"
    },
    changeItem: function() {
      var three = {
        three: 'three'
      };
      this.set('item.votes.0', three);
    }
  });
</script>


<button-group></button-group>