在对象中使用 Polymer push 方法答案

【问题标题】：Use Polymer push method in a object在对象中使用 Polymer push 方法
【发布时间】：2016-05-14 20:41:38
【问题描述】：

我是 javascript 和 Polymer 的初学者：我需要在我的自定义对象中使用本机聚合物推送方法，但它给了我浏览器：

“未捕获的类型错误：无法读取未定义的属性 'length'”

这是我的代码的简化版本：

<link rel='import' href='bower_components/polymer/polymer.html'>

<dom-module id='random-tag'>
  <template>
    <template is='dom-repeat' items='[[MyObject.getArray()]]'>
      <div>
        <h2>[[item.id]]</h2>
      </div>
    </template>
  </template>

  <script>
    Polymer({
      is: 'random-tag',

      properties: {
        MyObject: {
          type: Object
        }
      },

      MyObject2: function(){
        var myArray = [];
        var idMap = {};

        this.getArray = function(){
          return this.myArray
        };

        this.add = function(element){
          //The problem is here: probably Polymer don't see 'myArray'
          //in MyObject2 because the path is wrong
          Polymer.Base.push('myArray', element)
          idMap[element.id] = myArray.length
        };

        this.getIndex = function(id){
          return idMap[id]
        }
      },

      ready: function(){
        this.MyObject = new this.MyObject2()
        this.MyObject.add({id : 'thing1'})
        console.log('thing1 has index: ' + this.MyObject.getIndex('thing1'))
      }
    });
  </script>
</dom-module>

【问题讨论】：

@GünterZöchbauer 感谢您的回复，很遗憾由于 SyntaxError: Unexpected identifier 而无法正常工作。但是，将 var 放入准备好的函数中，我得到相同的错误 Uncaught TypeError: Cannot read property 'length' of undefined.

标签： javascript object polymer push polymer-1.0

【解决方案1】：

你需要从像

这样的 Polymer 元素开始

<script>
    Polymer({
      is: 'random-tag',

      properties: {
        MyObject: {
          type: Object
        }
      },

      var self = this;

      MyObject2: function(){
        var myArray = [];
        var idMap = {};

        this.getArray = function(){
          return this.myArray
        };

        this.add = function(element){
          //The problem is here: probably Polymer don't see 'myArray'
          //in MyObject2 because the path is wrong
          self.push('myArray', element)
          idMap[element.id] = myArray.length
        };

        this.getIndex = function(id){
          return idMap[id]
        }
      },

      ready: function(){
        this.MyObject = new this.MyObject2()
        this.MyObject.add({id : 'thing1'})
        console.log('thing1 has index: ' + this.MyObject.getIndex('thing1'))
      }
    });
  </script>
</dom-module>

未测试（我对JS不太了解，请谨慎使用）

【讨论】：

【解决方案2】：

问题不是路径不好，而是您尝试在MyObject2 中使用Polymer.Base 函数。

假设您不需要定义单独的类（即MyObject2），实现此目的的更简洁方法是直接在 Polymer 对象中定义这些属性/方法（即，将 Polymer 对象视为您的类封装），像这样：

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

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <h1>My Objects</h1>
      <template is='dom-repeat' items='[[myArray]]'>
        <div>
          <h2>[[item.id]]</h2>
        </div>
      </template>
    </template>
    <script>
      Polymer({
        is: 'x-foo',

        properties: {
          myArray: {
            type: Array,
            value: function() {
              return [];
            }
          },
          idMap: {
            type: Object,
            value: function() {
              return {};
            }
          }
        },

        add: function(element) {
          this.push('myArray', element);
          this.idMap[element.id] = this.myArray.length;
        },

        getIndex: function(id) {
          return this.idMap[id];
        },

        ready: function() {
          this.add({id: 'thing1'});
          this.add({id: 'thing2'});
          console.log('thing1 has index: ' + this.getIndex('thing1'));
        }
      });
    </script>
  </dom-module>
</body>

^jsbin

【讨论】：

感谢@tony19 的回复！但是如果我想在一个单独的类中定义 MyObject2 我该怎么办？
一个单独的类是可行的，但是数据绑定会非常低效。我可以更新答案给你看。为什么要将MyObject2 放在单独的班级中？
请更新答案。为了保持一致性，我希望 MyObject2 在一个单独的类中：MyObject2 的意思就像一个数据结构。