logo标签列表

在对象中使用Polymer的push方法

javascriptobjectpolymerpushpolymer-1.0
3

我是一名JavaScript和Polymer的初学者，需要在自定义对象中使用本机Polymer push方法，但浏览器返回：

"Uncaught TypeError：不能读取未定义的属性'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。 - James Coccinella
2个回答
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不太了解，所以请谨慎使用）

0
问题不在于错误的路径，而是您试图在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>

{{link1：jsbin}}

谢谢您的回复，@tony19！但是如果我想在一个单独的类中定义MyObject2，我该怎么做呢？ - James Coccinella
一个单独的类是可行的，但数据绑定会非常低效。我可以更新答案来展示给你。为什么你想要将MyObject2放在一个单独的类中？ - tony19
请更新答案。基本上，为了保持一致性，我希望将MyObject2放在单独的类中：MyObject2被设计成像一个数据结构。 - James Coccinella
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接