backbone.js - source - underscore js download

Mejor solución para colecciones anidadas de Backbone.js

Question

Muchos de mis modelos de Backbone a menudo tratan con colecciones y modelos anidados, hasta ahora estoy usando una combinación de defaults , parse y toJSON manualmente para lograr el anidado:

ACME.Supplier = Backbone.Model.extend({
    defaults: function() {
        return {
            contacts: new ACME.Contacts(),
            tags: new ACME.Tags(),
            attachments: new ACME.Attachments()
        };
    },

    parse: function(res) {
        if (res.contacts) res.contacts = new ACME.Contacts(res.contacts);
        if (res.tags) res.tags = new ACME.Tags(res.tags);
        if (res.attachments) res.attachments = new ACME.Attachments(res.attachments);

        return res;
    }
});

ACME.Tag = Backbone.Model.extend({
    toJSON: function() {
        return _.pick(this.attributes, ''id'', ''name'', ''type'');
    }
});

He visto algunos complementos que básicamente hacen lo mismo que antes pero con mucho menos control y más repetitivo, por lo que me pregunto si alguien tiene una solución más elegante para este problema común de Backbone.js.

Edit: Terminé con el siguiente enfoque:

ACME.Supplier = Backbone.Model.extend({
    initialize: function(options) {
        this.tags = new ACME.Tags(options.tags);
    },

    parse: function(res) {
        res.tags && this.tags.reset(res.tags);

        return res;
    }
});

ACME.Tag = Backbone.Model.extend({
    toJSON: function() {
        return _.pick(this.attributes, ''id'', ''name'', ''type'');
    }
});

Vale la pena señalar que más tarde descubrí que deberá pasar los datos de modelo / colección anidados del constructor al constructor del modelo anidado a través del objeto de options .

Answer 1

Ante el mismo problema, hago algo así (el código de abajo es el resultado del compilador de TypeScript, por lo que es un poco detallado):

  var Model = (function (_super) {
    __extends(Model, _super);
    function Model() {
        _super.apply(this, arguments);
    }
    Model.prototype.fieldToType = function () {
        return {};
    };

    Model.prototype.parse = function (response, options) {
        _.each(this.fieldToType(), function (type, field) {
            if (response[field]) {
                if (_.isArray(response[field])) {
                    response[field] = _.map(response[field], function (value) {
                        return new type(value, { parse: true });
                    });
                } else {
                    response[field] = new type(response[field], { parse: true });
                }
            }
        });
        return _super.prototype.parse.call(this, response, options);
    };
    Model.prototype.toJSON = function () {
        var j = _super.prototype.toJSON.call(this);
        _.each(this.fieldToType(), function (type, field) {
            if (j[field]) {
                if (_.isArray(j[field])) {
                    j[field] = _.map(j[field], function (value) {
                        return value.toJSON();
                    });
                } else {
                    j[field] = j[field].toJSON();
                }
            }
        });
        return j;
    };
    return Model;
})(Backbone.Model);

Y luego simplemente puedo anular el método fieldToType para definir los tipos de mis campos:

PendingAssignmentOffer.prototype.fieldToType = function () {
    return {
        ''creator'': User,
        ''task_templates'': TaskTemplateModel,
        ''users'': User,
        ''school_classes'': SchoolClass
    };
};

Answer 2

Me he enterado de que, con este enfoque, la función toJSON del proveedor quedará desactualizada, por lo que podría ser una buena idea volver a armar su estado JSON y los datos de los niños.

ACME.Supplier = Backbone.Model.extend({
    initialize: function(options) {
        this.tags = new ACME.Tags(options.tags);
    },

    parse: function(res) {
        res.tags && this.tags.reset(res.tags);

        return res;
    },

    toJSON: function({
        return _.extend(
            _.pick(this.attributes, ''id'', ''attr1'', ''attr2''), {
            tags: this.tags.toJSON(),
        });
    })

});

Answer 3

No queríamos agregar otro marco para lograrlo, así que lo abstraemos en una clase de modelo base. Así es como usted lo declara y lo usa ( disponible como una esencia ):

// Declaration

window.app.viewer.Model.GallerySection = window.app.Model.BaseModel.extend({
  nestedTypes: {
    background: window.app.viewer.Model.Image,
    images: window.app.viewer.Collection.MediaCollection
  }
});

// Usage

var gallery = new window.app.viewer.Model.GallerySection({
    background: { url: ''http://example.com/example.jpg'' },
    images: [
        { url: ''http://example.com/1.jpg'' },
        { url: ''http://example.com/2.jpg'' },
        { url: ''http://example.com/3.jpg'' }
    ],
    title: ''Wow''
}); // (fetch will work equally well)

console.log(gallery.get(''background'')); // window.app.viewer.Model.Image
console.log(gallery.get(''images'')); // window.app.viewer.Collection.MediaCollection
console.log(gallery.get(''title'')); // plain string

Funciona igual de bien con set y toJSON .
Y aquí está BaseModel :

window.app.Model.BaseModel = Backbone.Model.extend({
  constructor: function () {
    if (this.nestedTypes) {
      this.checkNestedTypes();
    }

    Backbone.Model.apply(this, arguments);
  },

  set: function (key, val, options) {
    var attrs;

    /* jshint -W116 */
    /* jshint -W030 */
    // Code below taken from Backbone 1.0 to allow different parameter styles
    if (key == null) return this;
    if (typeof key === ''object'') {
      attrs = key;
      options = val;
    } else {
      (attrs = {})[key] = val;
    }
    options || (options = {});
    // Code above taken from Backbone 1.0 to allow different parameter styles
    /* jshint +W116 */
    /* jshint +W030 */

    // What we''re trying to do here is to instantiate Backbone models and collections
    // with types defined in this.nestedTypes, and use them instead of plain objects in attrs.

    if (this.nestedTypes) {
      attrs = this.mapAttributes(attrs, this.deserializeAttribute);
    }

    return Backbone.Model.prototype.set.call(this, attrs, options);
  },

  toJSON: function () {
    var json = Backbone.Model.prototype.toJSON.apply(this, arguments);

    if (this.nestedTypes) {
      json = this.mapAttributes(json, this.serializeAttribute);
    }

    return json;
  },

  mapAttributes: function (attrs, transform) {
    transform = _.bind(transform, this);
    var result = {};

    _.each(attrs, function (val, key) {
      result[key] = transform(val, key);
    }, this);

    return result;
  },

  serializeAttribute: function (val, key) {
    var NestedType = this.nestedTypes[key];
    if (!NestedType) {
      return val;
    }

    if (_.isNull(val) || _.isUndefined(val)) {
      return val;
    }

    return val.toJSON();
  },

  deserializeAttribute: function (val, key) {
    var NestedType = this.nestedTypes[key];
    if (!NestedType) {
      return val;
    }

    var isCollection = this.isTypeASubtypeOf(NestedType, Backbone.Collection),
        child;

    if (val instanceof Backbone.Model || val instanceof Backbone.Collection) {
      child = val;
    } else if (!isCollection && (_.isNull(val) || _.isUndefined(val))) {
      child = null;
    } else {
      child = new NestedType(val);
    }

    var prevChild = this.get(key);

    // Return existing model if it is equal to child''s attributes

    if (!isCollection && child && prevChild && _.isEqual(prevChild.attributes, child.attributes)) {
      return prevChild;
    }

    return child;
  },

  isTypeASubtypeOf: function (DerivedType, BaseType) {
    // Go up the tree, using Backbone''s __super__.
    // This is not exactly encouraged by the docs, but I found no other way.

    if (_.isUndefined(DerivedType[''__super__''])) {
      return false;
    }

    var ParentType = DerivedType[''__super__''].constructor;
    if (ParentType === BaseType) {
      return true;
    }

    return this.isTypeASubtypeOf(ParentType, BaseType);
  },

  checkNestedTypes: function () {
    _.each(this.nestedTypes, function (val, key) {
      if (!_.isFunction(val)) {
        console.log(''Not a function:'', val);
        throw new Error(''Invalid nestedTypes declaration for key '' + key + '': expected a function'');
      }
    });
  },
}

Answer 4

No veo ningún problema con su enfoque.

En mi humilde opinión, el método Model.parse() si para esto: se debe sobrescribir en caso de que necesite un comportamiento de análisis especial .

El único pensamiento que cambiaría sería algo como esto:

if (res.tags) res.tags = new ACME.Tags(res.tags);

Para esto:

if (res.tags) this.tags.reset(res.tags);

Debido a que ya tiene una instancia de la colección ACME.Tags , la reutilizaría.

Además, no me gusta mucho la implementación por defaults , estoy acostumbrado a hacer estas inicializaciones en el Model.initialize() pero creo que es una cuestión de gusto.