Question

我有一个Polymer页面，我正在尝试将新数据推送到my_cart_items属性。如果我在this.AddNewGrocery("data");中致电ready()，它就有效;但当我在this.GetGroceryItem("null", "null", this.AddNewGrocery);中将该函数作为回调传递时，我收到此错误：

未捕获的TypeError：this.push不是函数（...）

我认为错误与范围有关，所以我尝试访问页面的本地DOM，如下所示：

//try 1 not working
Polymer.dom(this.root).querySelector('my-shopview').push('my_cart_items', new CartItem("null","null","Banana1","null","null","null","null"));

//try 2 not working
document.querySelector('my-shopview').push('my_cart_items', new CartItem("null","null","Banana1","null","null","null","null"));

我不知道还能做什么。有人可以帮我解决这个问题吗？

class CartItem {
  constructor(groceryId, groceryImgeUrl, groceryName, groceryOrigin, groceryDescription, grocerSaleDetails, groceryDealDetail, grocerySaleTags, produseTypeTag) {
    this.groceryId = groceryId
    this.groceryImgeUrl = groceryImgeUrl
    this.groceryName = groceryName;
    this.groceryOrigin = groceryOrigin;
    this.groceryDescription = groceryDescription;
    this.grocerSaleDetails = grocerSaleDetails;
    this.groceryDealDetail = groceryDealDetail;
    this.grocerySaleTags = grocerySaleTags;
    this.produseTypeTag = produseTypeTag;
  }
}
Polymer({
  is: 'my-shopview',
  properties: {
    my_cart_items: {
      type: Object,
      value: function() {
        return [];
      }
    }
  },
  // Query the database for data
  GetGroceryItem: function(query, count, callback) {
    var message = "null";
    //query the database 

    //callback after we've received the data
    if (callback && typeof callback == "function") {
      return callback(message)
    }
  },
  //Callback method to be called after GetGroceryItem has finished executing
  AddNewGrocery: function(post) {
    //Working when function is called not as a callback method
    this.push('my_cart_items', new CartItem("null", "null", "Banana1", "null", "null", "null", "null"));
    //Try 1 not Working
    //Polymer.dom(this.root).querySelector('my-shopview').push('my_cart_items', new CartItem("null","null","Banana1","null","null","null","null"));
    //Try 2 not Working
    //document.querySelector('my-shopview').push('my_cart_items', new CartItem("null","null","Banana1","null","null","null","null"));
  },
  //After local dom has been initiized
  ready: function() {
    //Populate my cart items with data from firebase
    this.push('my_cart_items', new CartItem("null", "null", "Banana2", "null", "null", "null", "null"));
    this.push('my_cart_items', new CartItem("null", "null", "Banana3", "null", "null", "null", "null"));
    //Get the grocery item's and invove the AddNewGrocery callback method
    this.GetGroceryItem("null", "null", this.AddNewGrocery);
  }
});

以下是其他两种方法的堆栈跟踪：

my-shopview.html:125 Uncaught TypeError: Cannot read property 'push' of null(…)
AddNewGrocery @ my-shopview.html:125
GetGroceryItem @ my-shopview.html:115
ready @ my-shopview.html:133
...

Answer 1

问题是你正在调用一个需要定义this的回调（具体来说，this应该是来自GetGroceryItem()的同一个Polymer对象），在这种情况下你应该使用Function.prototype.call(this, ...)：

callback.call(this, message);

＆＃13;

HTMLImports.whenReady(function() {
  Polymer({
    is: 'my-shopview',
    properties: {
      my_cart_items: {
        type: Object,
        value: function() {
          return [];
        }
      }
    },

    GetGroceryItem: function(query, count, callback) {
      var message = "null";

      if (callback && typeof callback == "function") {
        return callback.call(this, message);
      }
    },

    AddNewGrocery: function(post) {
      this.push('my_cart_items', 'Banana1');
    },

    ready: function() {
      this.push('my_cart_items', 'Banana2');
      this.push('my_cart_items', 'Banana3');
      this.GetGroceryItem("null", "null", this.AddNewGrocery);
    }
  });
});

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <my-shopview></my-shopview>

  <dom-module id="my-shopview">
    <template>
      <template is="dom-repeat" items="[[my_cart_items]]">
        <div>[[item]]</div>
      </template>
    </template>
  </dom-module>
</body>

＆＃13;

codepen

如何使用回调方法将数据插入聚合物属性

1 个答案: