Question

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

“未捕获的TypeError：无法读取未定义的属性'长度'

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

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

Answer 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，所以谨慎使用）

Answer 2

问题不是一条糟糕的道路，而是您尝试在Polymer.Base内使用MyObject2功能。

假设您不需要定义单独的类（即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

在对象中使用Polymer push方法

2 个答案: