使用 Polymer 设置 Firebase 数据数组的值
Set values of a Firebase data array using Polymer
问题:
我想尝试在我的 Firebase 根目录下放置多个游戏 运行,它们都有 Firebase 生成的 ID,
当我尝试使用 <firebase-collection>
获取它们时,我总是得到一个对象数组,并且 Polymer 很难进行双向绑定。
有没有办法将 Firebase 数据作为对象获取?
我尝试添加data-as-object
属性,但是没有用,我也得到了一个数组。
我什至尝试通过简单地将
<-collection>
形式更改为 <-document>
来使用 <firebase-document>
元素,但随后更新游戏数据并没有推送到 firebase .
我不知道这是否可能...
或者有好的双向绑定的方法吗?
我不能使用数组项的索引,如下所示:this.set('gameData.' + i)
,因为当我尝试修改对象下的值时出现错误 Uncaught Error: unexpected key 2
在数组中
上的完整代码
我的代码:
数据提供者:
<firebase-collection location="https://***.firebaseio.com"
data="{{data}}" data-as-object log>
</firebase-collection>
<!-- script -->
Polymer({
is: 'tmp-game-data',
properties: {
data: {
notify: true
}
}
});
游戏元素:
<!-- map with several players(Array), -->
<!-- an player(Object) has some properties -->
<!-- on-map-ready, when the map is fully configured -->
<tmp-map players="{{game.players}}"
on-map-ready="_mapReadyCallback">
</tmp-map>
<!-- menu user for creating and -->
<!-- joining games with selected settings -->
<tmp-menu on-start-global-game="startGlobalGame"
on-join-game="joinGame">
</tmp-menu>
<tmp-game-data data="{{gamesData}}"></tmp-game-data>
<!-- script -->
var blocks = []; //Map blocks, global access
Polymer({
is: 'tmp-game',
properties: {
gamesData: {
notify: true
},
game: {
notify: true
},
gameId: {
type: String
}
},
startGlobalGame: function(e) {
var gameId = getRandomString(6);
this.set('gameId', gameId);
var player = {id: /*playerId*/};
var players = [player];
this.push('gamesData', {
gameId: gameId,
maxPlayers: e.detail.maxPlayers,
players: players
});
this.selectGame();
//generate map
},
joinGame: function(e) {
var gameId = e.detail.gameId;
for (var i = 0; i < this.gamesData.length; i++) {
if(this.gamesData[i].gameId === gameId) {
var map = this.get('gamesData.' + i + '.map');
//generate map with the map of the game
}
}
this.selectGame();
},
selectGame: function() {
for (var i = 0; i < this.gamesData.length; i++) {
if(this.gamesData[i].gameId === this.gameId) {
this.set('game', this.gamesData[i]);
this.linkPaths('game', 'gamesData.' + i);
}
}
},
_mapReadyCallback: function(e) {
for (var i = 0; i < this.gamesData.length; i++) {
if(this.gamesData[i].gameId === this.gameId) {
//get the map as a json
var map = JSON.stringify(blocks);
this.set('gamesData.' + i + '.map', map);
}
}
}
});
我不认为有一种方法可以将数据作为对象而不是数组来操作...
在您的代码段中,您没有为 data
和 gamesData
指定数组类型
您将不得不使用 Polymer API 来操作您通过数据绑定获得的数组,例如 this.push
、this.splice
等...就像您已经做的那样。
您应该也可以 this.set('gamesData.' + i + '.map', map);
像描述的那样 here
问题:
我想尝试在我的 Firebase 根目录下放置多个游戏 运行,它们都有 Firebase 生成的 ID,
当我尝试使用 <firebase-collection>
获取它们时,我总是得到一个对象数组,并且 Polymer 很难进行双向绑定。
有没有办法将 Firebase 数据作为对象获取?
我尝试添加data-as-object
属性,但是没有用,我也得到了一个数组。
我什至尝试通过简单地将 <-collection>
形式更改为 <-document>
来使用 <firebase-document>
元素,但随后更新游戏数据并没有推送到 firebase .
我不知道这是否可能...
或者有好的双向绑定的方法吗?
我不能使用数组项的索引,如下所示:this.set('gameData.' + i)
,因为当我尝试修改对象下的值时出现错误 Uncaught Error: unexpected key 2
在数组中
我的代码:
数据提供者:
<firebase-collection location="https://***.firebaseio.com"
data="{{data}}" data-as-object log>
</firebase-collection>
<!-- script -->
Polymer({
is: 'tmp-game-data',
properties: {
data: {
notify: true
}
}
});
游戏元素:
<!-- map with several players(Array), -->
<!-- an player(Object) has some properties -->
<!-- on-map-ready, when the map is fully configured -->
<tmp-map players="{{game.players}}"
on-map-ready="_mapReadyCallback">
</tmp-map>
<!-- menu user for creating and -->
<!-- joining games with selected settings -->
<tmp-menu on-start-global-game="startGlobalGame"
on-join-game="joinGame">
</tmp-menu>
<tmp-game-data data="{{gamesData}}"></tmp-game-data>
<!-- script -->
var blocks = []; //Map blocks, global access
Polymer({
is: 'tmp-game',
properties: {
gamesData: {
notify: true
},
game: {
notify: true
},
gameId: {
type: String
}
},
startGlobalGame: function(e) {
var gameId = getRandomString(6);
this.set('gameId', gameId);
var player = {id: /*playerId*/};
var players = [player];
this.push('gamesData', {
gameId: gameId,
maxPlayers: e.detail.maxPlayers,
players: players
});
this.selectGame();
//generate map
},
joinGame: function(e) {
var gameId = e.detail.gameId;
for (var i = 0; i < this.gamesData.length; i++) {
if(this.gamesData[i].gameId === gameId) {
var map = this.get('gamesData.' + i + '.map');
//generate map with the map of the game
}
}
this.selectGame();
},
selectGame: function() {
for (var i = 0; i < this.gamesData.length; i++) {
if(this.gamesData[i].gameId === this.gameId) {
this.set('game', this.gamesData[i]);
this.linkPaths('game', 'gamesData.' + i);
}
}
},
_mapReadyCallback: function(e) {
for (var i = 0; i < this.gamesData.length; i++) {
if(this.gamesData[i].gameId === this.gameId) {
//get the map as a json
var map = JSON.stringify(blocks);
this.set('gamesData.' + i + '.map', map);
}
}
}
});
我不认为有一种方法可以将数据作为对象而不是数组来操作...
在您的代码段中,您没有为 data
和 gamesData
您将不得不使用 Polymer API 来操作您通过数据绑定获得的数组,例如 this.push
、this.splice
等...就像您已经做的那样。
您应该也可以 this.set('gamesData.' + i + '.map', map);
像描述的那样 here