Exploring the Power of Backbone.js with Embedded One-To-Many Relationships

Question

Exploring the Power of Backbone.js with Embedded One-To-Many Relationships

Creating a Survey App

Developing an application for creating surveys where each survey contains multiple questions. The questions are embedded into the survey model using embeds_many in Mongoid, resulting in a survey structure like this:

{
  "id":    "4f300a68115eed1ddf000004",
  "title": "Example Survey",
  "questions": 
  [
    {
      "id":      "4f300a68115eed1ddf00000a",
      "title":   "Share your experience with backbone.js", 
      "type":    "textarea"
    },
    {
      "title":   "Do you enjoy it?", 
      "id":      "4f300a68115eed1ddf00000b",
      "type":    "radiobutton",
      "options": ["Yes", "Yes, a lot!"]
    }
  ]
}

The survey editor includes a SurveyView to display the survey and list the questions. Clicking on a question launches a QuestionView for editing that specific question. Upon saving, the updated SurveyModel is sent to the server.

Dealing with Embedded Associations

Exploring the best approach to handle the embedded association:

One method involves passing

survey.get("questions")[any_index]

to the QuestionView. However, if the question is edited, manual search for the question.id in the model is required, which can be inefficient.

Alternatively, creating a QuestionsCollection within the SurveyModel allows for fetching a Question by id from the collection. This approach ensures automatic updates when the model is changed, although specifying a URL in the collection might result in unnecessary server requests for individual questions updates.

Seeking suggestions on how to handle this situation in accordance with the backbone framework.

javascript json mongodb backbone.js coffeescript

Answer 1

Answer №1

Implementing Embedded One-to-Many Associations in Backbone.js

After taking inspiration from @Sander's answer, I decided to share my code implementation:

class Survey extends Backbone.Model
        
  # Manage the Survey.questions association for server data parsing
  parse: (resp) ->
    if @attributes?.questions?
      @attributes.questions.reset(resp.questions)
    else
      resp.questions = new QuestionsCollection(resp.questions)
    resp

  # Rebuild Survey.questions
  toJSON: ->
    attributes = _.clone(@attributes)
    attributes.questions = attributes.questions.toJSON()
    attributes

Now, I can easily perform actions like:

survey = Survey.get("my-id")
survey.questions.at(0).title = "First question"
survey.questions.at(1).title = "Second question"
survey.save()

This method proves to be quite user-friendly.

Answer 2

Implementing Embedded One-to-Many Associations in Backbone.js

After taking inspiration from @Sander's answer, I decided to share my code implementation:

class Survey extends Backbone.Model
        
  # Manage the Survey.questions association for server data parsing
  parse: (resp) ->
    if @attributes?.questions?
      @attributes.questions.reset(resp.questions)
    else
      resp.questions = new QuestionsCollection(resp.questions)
    resp

  # Rebuild Survey.questions
  toJSON: ->
    attributes = _.clone(@attributes)
    attributes.questions = attributes.questions.toJSON()
    attributes

Now, I can easily perform actions like:

survey = Survey.get("my-id")
survey.questions.at(0).title = "First question"
survey.questions.at(1).title = "Second question"
survey.save()

This method proves to be quite user-friendly.

Answer 3

Answer №2

It is definitely possible to include a questionsCollection within your SurveyModel.

However, each question is typically viewed as an individual question with its own unique ID. Even though every question will have its own ID, it is still possible for the server to identify which survey it belongs to.

When it comes to parsing your JSON data, if you manually build your collections and models, you won't encounter this issue. But if you try to add nested JSON data, it will not automatically create a sub collection for your model. In such cases, you will need to specify these details in an overridden parse method.

Answer 4

It is definitely possible to include a questionsCollection within your SurveyModel.

However, each question is typically viewed as an individual question with its own unique ID. Even though every question will have its own ID, it is still possible for the server to identify which survey it belongs to.

When it comes to parsing your JSON data, if you manually build your collections and models, you won't encounter this issue. But if you try to add nested JSON data, it will not automatically create a sub collection for your model. In such cases, you will need to specify these details in an overridden parse method.

Answer 5

Answer №3

It is possible to achieve this during the construction process.

class Survey extends Backbone.Model

initialize: ->
    @questions = new QuestionsCollection(@get('questions'))

Furthermore, you have the ability to expand the model universally in order to retrieve the nested data:

_.extend Backbone.Model::, deepToJSON: ->
  obj = @toJSON()
  _.each _.keys(obj), (key) ->
    obj[key] = obj[key].deepToJSON()  if _.isFunction(obj[key].deepToJSON)

  obj

_.extend Backbone.Collection::, deepToJSON: ->
  @map (model) ->
    model.deepToJSON()

Answer 6

It is possible to achieve this during the construction process.

class Survey extends Backbone.Model

initialize: ->
    @questions = new QuestionsCollection(@get('questions'))

Furthermore, you have the ability to expand the model universally in order to retrieve the nested data:

_.extend Backbone.Model::, deepToJSON: ->
  obj = @toJSON()
  _.each _.keys(obj), (key) ->
    obj[key] = obj[key].deepToJSON()  if _.isFunction(obj[key].deepToJSON)

  obj

_.extend Backbone.Collection::, deepToJSON: ->
  @map (model) ->
    model.deepToJSON()

Answer 7

Answer №4

One way to tackle this issue is by customizing the parse and toJSON functions. It is important to note that when the object is fetched through a collection, the context of "this" in the parse method does not refer to the model object. In this case, parse is called and the output is then passed to initialize. If you require "this" to refer to the model object for event binding purposes, an alternative option is to override the set method instead. For a demonstration of this approach, I have shared a simple script on Github.

Answer 8

One way to tackle this issue is by customizing the parse and toJSON functions. It is important to note that when the object is fetched through a collection, the context of "this" in the parse method does not refer to the model object. In this case, parse is called and the output is then passed to initialize. If you require "this" to refer to the model object for event binding purposes, an alternative option is to override the set method instead. For a demonstration of this approach, I have shared a simple script on Github.

Exploring the Power of Backbone.js with Embedded One-To-Many Relationships

Creating a Survey App

Dealing with Embedded Associations

Answer №1

Implementing Embedded One-to-Many Associations in Backbone.js

Answer №2

Answer №3

Answer №4

Similar questions

Removing double double quotes for Javascript

Setting breakpoints in Node-Inspector can be quite challenging

Transforming a JSON object with Backbone and Laravel

Display the list items within a div only if the height is lower than a separate div

Employing useEffect within Material-UI tabs to conceal the third tab

Comparing CakePHP's JSON and AJAX capabilities

The error message keeps appearing consistently. What is the best way to manage this error?

Automatic Expansion Feature for HTML Tables

Is there a way to customize the JSON-wrapped key for a class without being able to annotate the class with @JsonTypeInfo?

It is not possible to import node_modules within an electron worker process

Unlocking the attributes of Angular form elements: A guide

Tips for developing a personalized form validator for validating JSON data exclusively in Angular

Is it better to use Opengov/mpg to analyze VIN numbers individually rather than in a looping sequence to avoid errors

The data from JSON is not being displayed on the Table View

Python: Flattening and Extracting specific JSON segments

Guzzle version 6.x is not delivering the desired outcome as expected

Combine values within a single property of an object using the reduce method

Adjustable height and maximum height with overflow functionality

Is there a way to fix the issue of ContextMenu not appearing at the right position within a scrollable

How to effectively manipulate nested arrays in JavaScript without altering their references