LeanCloud with Angularjs tips (1)

因爲Angularjs使用的是plain object，而LeanCloud用的是一個封裝起來的對象，因此無法簡單的在angular裏使用{{xx.yy}}這樣的方式來綁定數據。

官方給出了方法是這篇Blog所述，使用Object.defineProperty來解決。

Object.defineProperty(Todo.prototype, "title", {
      get: function() {
        return this.get("text");
      },
      set: function(aValue) {
        this.set("text", aValue);
      }
    });

這方法很好，因此咱們能夠直接寫一個service來把它做爲一個基礎服務使用。

angular.module('demo')
  .service('leancloud', function leancloud() {
    var ClassDefines = {
      'Product': {attributes: ['name', 'website']},
      'ProductDetail': {attributes: ['size', 'price']}
    };

    return {
      angularizeAll: function () {
        angular.forEach(ClassDefines, function (classDefine, className) {
          var classObject = AV.Object.extend(className);
          angular.forEach(classDefine.attributes, function (attr) {
            Object.defineProperty(classObject.prototype, attr, {
              get: function () {
                return this.get(attr);
              },
              set: function (value) {
                this.set(attr, value);
              }
            });
          })
        })
      }
    }
  });

在程序的開始執行

angular.module('demo')
.run(function (leancloud) {
    leancloud.angularizeAll();
  });

就能夠盡情使用綁定帶來的好處啦～