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

How to use a callback method to insert data to a polymer property

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

Uncaught TypeError: this.push is not a function(a€|)

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

1
2
3
4
5

//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"));

我不知道还能做什么。谁能帮我解决这个问题？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

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);
}
});

这是我对其他 2 种方法的堆栈跟踪：

1
2
3
4
5

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

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

1	callback.call(this, message);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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);
}
});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

codepen