如何扩展$ asArray返回的列表中的返回对象?

时间:2014-09-14 17:29:58

标签: angularjs firebase angularfire

我无法使用新方法装饰我的列表中的$ asArray返回的对象(不用装饰数组本身)。

angularfire文档似乎表明,正确的方法是在$ FirebaseArray的工厂中覆盖$$添加的方法,返回一个新对象,该对象封装或扩展传递给该方法的快照。来自documentation

// an object to return in our JokeFactory
app.factory("Joke", function($firebaseUtils) {
  function Joke(snapshot) {
    this.$id = snapshot.name();
    this.update(snapshot);
  }

  Joke.prototype = {
    update: function(snapshot) {
      // apply changes to this.data instead of directly on `this`
      this.data = snapshot.val();
    },

    makeJoke: function() {
      alert("Why did the " + this.animal + " cross the " + this.obstacle + "?");
    },

    toJSON: function() {
      // since we didn't store our data directly on `this`, we need to return
      // it in parsed format. We can use the util function to remove $ variables
      // and get it ready to ship
      return $firebaseUtils.toJSON(this.data);
    }
  };

  return Joke;
});

app.factory("JokeFactory", function($FirebaseArray, Joke) {
  return $FirebaseArray.$extendFactory({
    // change the added behavior to return Joke objects
    $$added: function(snap) {
      return new Joke(snap);
    },

    // override the update behavior to call Joke.update()
    $$updated: function(snap) {
       this.$getRecord(snap.name()).update(snap);
    }
  });
});

然而,当我在我的代码中执行此操作时,没有任何内容可以添加到数组中,尽管我可以看到从输出到控制台时它会被调用。

var printMessageObjConstructor = function(snap) {
      this.$id = snap.name();
      this.snapshot = snap;
      this.$update = function(snap) {
        this.snapshot = snap;
      };
      this.printMessage = function() {
        return this.author + "'s question is: " + this.body;
      };
    };

    var ref = new Firebase("https://danculley-test.firebaseio.com/questions");
    //What Am I Doing Wrong Here?
    var arrayFactory = $FirebaseArray.$extendFactory({
      $$added: function(snap, prevChild) {
        var x = new printMessageObjConstructor(snap);
        console.log("I am being called from FirebaseDecoratedCtlOverloadAddedinNewObj.");
        return x;
      },
      $createObject: function(snap) {
        return new printMessageObjConstructor(snap);
      },
      $$updated: function(snap) {
        var i = this.$indexFor(snap.name());
        var q = this.$list[i];
        q.$update(snap);
      }
    });
    var sync = $firebase(ref, {arrayFactory:arrayFactory});

    var list = sync.$asArray();

    list.$loaded(function(list) {
      $scope.questions = list;
    });

我已经设置了一个新的plunk,以显示我尝试过的其他一些用例的问题。 (我添加的实际方法更复杂,与视图无关,但我想做一些简单的事情来重现这个问题。)

我认为问题在于我不太明白$$添加的应该返回什么,或者除了返回要添加的值之外还有什么额外的行为。在原型上或者在$ FirebaseArray上添加一个$$似乎并不是为了获取默认行为而调用super。有人能指出我正确的方向吗?

更新

为了他人的利益,在审查了Kato发布的内容之后,我能够通过添加以下内容来解决问题,几乎所有这些都直接从源代码复制,除了下面的注释行。

$$added: function(snap, prevChild) {

        var i = this.$indexFor(snap.name());
          if( i === -1 ) {

            var rec = snap.val();
            if( !angular.isObject(rec) ) {
              rec = { $value: rec };
            }
            rec.$id = snap.name();
            rec.$priority = snap.getPriority();
            $firebaseUtils.applyDefaults(rec, this.$$defaults);

            //This is the line that I added to what I copied from the source
            angular.extend(rec, printMessageObj);


            this._process('child_added', rec, prevChild);
          }
      }

1 个答案:

答案 0 :(得分:2)

为了他人的利益,在审查了Kato发布的链接后,我能够通过添加以下内容来解决问题,几乎所有这些都直接从源代码复制,除了下面的注释行。

$$added: function(snap, prevChild) {

    var i = this.$indexFor(snap.name());
      if( i === -1 ) {

        var rec = snap.val();
        if( !angular.isObject(rec) ) {
          rec = { $value: rec };
        }
        rec.$id = snap.name();
        rec.$priority = snap.getPriority();
        $firebaseUtils.applyDefaults(rec, this.$$defaults);

        //This is the line that I added to what I copied from the source
        angular.extend(rec, printMessageObj);


        this._process('child_added', rec, prevChild);
      }
  }