【问题标题】:Set values of a Firebase data array using Polymer使用 Polymer 设置 Firebase 数据数组的值
【发布时间】:2015-12-10 19:29:25
【问题描述】:

问题:
我想尝试在我的 Firebase 的根目录下运行多个游戏,它们都有 Firebase 生成的 id,
当我尝试使用<firebase-collection> 获取它们时,我总是得到一个对象数组,并且使用 Polymer 进行双向绑定非常困难。
有没有办法将 Firebase 数据作为对象获取?

我尝试添加data-as-object 属性,但没有成功,我还得到了一个数组。
我什至尝试通过简单地将表单
<-collection> 更改为 <-document> 来使用 <firebase-document> 元素,但随后更新游戏数据并没有推送到 firebase。
我不知道这是否可能......

或者有没有一种很好的双向绑定方法?
我无法使用数组项的索引,例如:this.set('gameData.' + i),因为当我尝试修改数组中 Object 下的值时,我收到错误 Uncaught Error: unexpected key 2

Github上的完整代码

我的代码:
数据提供者:

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

【问题讨论】:

  • 我删除了&lt;dom-module&gt;&lt;template&gt;&lt;script&gt;以简化代码

标签: arrays firebase polymer 2-way-object-databinding


【解决方案1】:

我认为没有办法将数据作为对象而不是数组来操作......

在您的 sn-p 中,您没有为 datagamesData 指定数组类型

您将不得不使用 Polymer API 来操作您通过数据绑定获得的数组,例如 this.pushthis.splice 等......就像您已经做过的那样。

您还应该能够this.set('gamesData.' + i + '.map', map); 就像描述的here 一样

【讨论】:

  • 我想到了&lt;firebase-collection&gt; 属性data-as-object,但不幸的是它不起作用......哦,是的,我已经添加了它,但是当我没有定义类型?问题是,当您使用 firebase 时,您不能使用 splice,因为 Firebase 然后会创建一个具有更改属性的新对象,并将您要删除的元素保留在他的服务器上......最后我会在this.set('gamesData.' + i + '.map', map); 上收到一个错误(在上面添加)我不知道这到底是什么意思,因为我显然按照预期的方式工作!
  • 没有这个属性! :) 我正在构建一组扩展 Firebase 的元素,您可能会对它感兴趣,并且我还将从中构建一个演示,我会及时通知您。同时,请在此处查看:github.com/MeTaNoV/firebase-element-extended
  • 但是为什么我可以在这里找到它? Polymer Elements
  • dataAsObject 是行为中定义的访问函数,但仅由 firebase-document 使用
  • 它甚至不应该公开,只是一个小错误,我会在这一点上提出一个小问题!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-02-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-09-11
相关资源
最近更新 更多