Using Backbone: Leveraging a custom extended model when fetching a collection

Question

Using Backbone: Leveraging a custom extended model when fetching a collection

Currently, I am working on developing a custom Wordpress theme using technologies like Javascript, Requirejs, and Backbonejs. As part of this process, in the index route, I have set up a new postsCollection

app.postsCollection = new Posts.Collection();

to store all WordPress posts. Subsequently, I call .fetch()

app.postsCollection.fetch( { success: ..., error: ... } );

Below is the code snippet from my modules/posts/collection.js file :

define( function( require, exports, module ) {

"use strict";

var app       = require( 'app' );
var PostModel = require( './model' );

var PostsCollection = Backbone.Collection.extend( {

    model   : PostModel,
    url     : app.jsonApi + "get_posts/",

    parse: function( response ) {

        return response.posts;

    }

} );

module.exports = PostsCollection;

} );

Issue at hand:

My current challenge involves extending the PostModel by defining

var ImagePostModel = PostModel.extend( { ... } );

and

var GalleryPostModel = PostModel.extend( { ... } );

. The objective is to use the specific model based on the post type (either image or gallery) during data collection. How can I achieve this effectively?

javascript wordpress backbone.js

Answer 1

Answer №1

When it comes to backbone properties, rather than directly specifying the object, you have the option to use a function that will return an object. For instance, you can define a function that returns an object for the events hash or the model property.

Rather than explicitly setting a model for your collections using model, you can utilize a function that, based on certain conditions, determines the appropriate model type to use.

As stated in the documentation

A collection can also support polymorphic models by overriding this property with a constructor that returns a model.

Here's an example provided:

var Library = Backbone.Collection.extend({

  model: function(attrs, options) {
    if (condition) {
      return new PublicDocument(attrs, options);
    } else {
      return new PrivateDocument(attrs, options);
    }
  }

});

Answer 2

When it comes to backbone properties, rather than directly specifying the object, you have the option to use a function that will return an object. For instance, you can define a function that returns an object for the events hash or the model property.

Rather than explicitly setting a model for your collections using model, you can utilize a function that, based on certain conditions, determines the appropriate model type to use.

As stated in the documentation

A collection can also support polymorphic models by overriding this property with a constructor that returns a model.

Here's an example provided:

var Library = Backbone.Collection.extend({

  model: function(attrs, options) {
    if (condition) {
      return new PublicDocument(attrs, options);
    } else {
      return new PrivateDocument(attrs, options);
    }
  }

});

Using Backbone: Leveraging a custom extended model when fetching a collection

Issue at hand:

Answer №1

Similar questions

"Utilize Ajax to dynamically generate options in a dropdown menu with multiple

Learn how to transfer and retrieve data in a different jade template using Node.js without relying on session management or query strings

How to customize TextField error color in Material-UI using conditional logic in React

Using promises and the fetch function to connect to a database

Displaying subtotal in a list using Vue.js and conditional rendering with v-if statement

What is the best way to align a box once another one has been placed?

The vertexUv in three.js is currently undefined and needs to be

Sending data to a Bootstrap modal dialog box in an Angular application

Utilize jQuery to append YQL output in JSON format to specific IDs in your code

``Incorporating Vue.js: A Guide to Emphasizing the Chosen Selection from Numerous Lists

Revamping the ejs template using an AJAX call

Tips for showing variables in Console directly from the Sources panel?

Using Javascript to make a call to a RESTful endpoint

Restoring styles back to the default CSS settings

How to access global variables in node.js modules?

Tips for effectively utilizing a cart collection system

Leveraging Promises in AngularJS to create a chain between two separate controllers

We are sorry, but the requested route cannot be located

What is the best location in Backbone.js to store code unrelated to the view, such as ads and analytics?

Is it better to store data individually in localStorage or combine it into one big string?