Challenging questions about Ember.js: managing save and delete operations for hasMany relationships

Question

Challenging questions about Ember.js: managing save and delete operations for hasMany relationships

Currently, I am working on my first Ember project which is a quiz generator. I have successfully implemented the functionality to create, edit, and delete quizzes, and save them to local storage. However, I am facing challenges in saving/deleting quiz questions for each quiz.

I am developing this project in Yeoman-Ember. I attempted to showcase a demo on JSBin, but encountered some issues. As an alternative, you can access a demo build here: and download the current state of the build in a zip file from this link:

Below is the content of my combined-scripts.js file:

(function() {

var Quizmaker = window.Quizmaker = Ember.Application.create();

/* Order and include as you please. */


})();

// The JS code continues... (The original script continues from here.)

If you have any suggestions on how I can enhance the functionality and resolve the issues with saving/deleting quiz questions, your input would be greatly appreciated. Additionally, I am seeking guidance on how to automatically toggle the isEditing state based on the display of the /edit route, rather than triggering it through an action.

javascript ember.js ember-data

Answer 1

Answer №1

Let's break this concept into two separate sections, starting with the most recent.

An effective way to differentiate between the edit mode and view mode is to utilize the built-in index route, which is displayed at the root level of each resource.

To achieve this, you can modify your quiz template by turning it into an outlet.

{{outlet}}

Additionally, create a quiz/index template that initially contained your quiz data. This template will only be visible when you access /quiz/123. When you navigate to /quiz/123/edit, the index template will be replaced by the edit template. (Remember to pass the model from the resource to both routes using modelFor).

App.Router.map(function() {
  this.resource('foo', {path:'/'},function(){
    this.route('edit');
  })
});

App.FooRoute = Em.Route.extend({
  model: function() {
    return [{color:'red'}, {color:'yellow'},{color: 'blue'}];
  }
});

App.FooIndexRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor('foo');
  }
});


App.FooEditRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor('foo');
  }
});

When working with Ember Data and having two record types with a relation to each other:

App.FooRecord = DS.Record.extend({
  bars: DS.hasMany('bar')
});

App.BarRecord = DS.Record.extend({
  foo: DS.belongsTo('foo')
});

To establish associations between two records:

var foo = store.create('foo');

var bar = store.create('bar');

foo.get('bars').pushObject(bar);

bar.set('foo', foo);

Upon saving the records, here is how Ember Data handles it:

foo.save();
// json sent
{
  foo: {}
}
// response with id 1

bar.save();
// json sent
{
  bar: {
    foo: 1
  }
}

Ember Data opts not to save the hasMany relationship if there is a corresponding belongsTo association from a different model.

https://github.com/emberjs/data/commit/7f752ad15eb9b9454e3da3f4e0b8c487cdc70ff0#commitcomment-6078838

Answer 2

Let's break this concept into two separate sections, starting with the most recent.

An effective way to differentiate between the edit mode and view mode is to utilize the built-in index route, which is displayed at the root level of each resource.

To achieve this, you can modify your quiz template by turning it into an outlet.

{{outlet}}

Additionally, create a quiz/index template that initially contained your quiz data. This template will only be visible when you access /quiz/123. When you navigate to /quiz/123/edit, the index template will be replaced by the edit template. (Remember to pass the model from the resource to both routes using modelFor).

App.Router.map(function() {
  this.resource('foo', {path:'/'},function(){
    this.route('edit');
  })
});

App.FooRoute = Em.Route.extend({
  model: function() {
    return [{color:'red'}, {color:'yellow'},{color: 'blue'}];
  }
});

App.FooIndexRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor('foo');
  }
});


App.FooEditRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor('foo');
  }
});

When working with Ember Data and having two record types with a relation to each other:

App.FooRecord = DS.Record.extend({
  bars: DS.hasMany('bar')
});

App.BarRecord = DS.Record.extend({
  foo: DS.belongsTo('foo')
});

To establish associations between two records:

var foo = store.create('foo');

var bar = store.create('bar');

foo.get('bars').pushObject(bar);

bar.set('foo', foo);

Upon saving the records, here is how Ember Data handles it:

foo.save();
// json sent
{
  foo: {}
}
// response with id 1

bar.save();
// json sent
{
  bar: {
    foo: 1
  }
}

Ember Data opts not to save the hasMany relationship if there is a corresponding belongsTo association from a different model.

https://github.com/emberjs/data/commit/7f752ad15eb9b9454e3da3f4e0b8c487cdc70ff0#commitcomment-6078838

Challenging questions about Ember.js: managing save and delete operations for hasMany relationships

Answer №1

Similar questions

What is the best way to utilize "require" dynamically in JavaScript?

Creating an expandable discussion area (part II)

bootstrap-vue tabs - reveal specific tab content based on URL anchor tag

The scrolling function halts as soon as the element that was middle-clicked is deleted from the

Phaser encountering a null window.computedStyle() error in Firefox (while dealing with a hidden Iframe)

Sending state information through props in a Vuex environment

Learn the process of updating database information with AngularJS through a button click

Merge two arrays of objects in Ramda.js based on their shared ID property

Capturing the unknown elements in a deeply nested array

Avoid turning negative numbers into NaN by ensuring that you do not divide by zero

developing a fresh node within the jstree framework

How to align the navbar toggle button and list items to the right in Bootstrap 5

Issue with Bottle.py: When using AJAX, request.forms.get() is returning NoneType

Issue with alignment in the multiselect filter of a React data grid

Enhance Your Text Areas with Vue.js Filtering

Instructions for removing a class using the onclick event in JavaScript

Focusing on pinpointing certain mistakes within Drupal 7

Saving an Axios request array to a Laravel controller in Laravel using VueJs

Disabling dates in the second datetimepicker depending on following days selected in the first one

Display a loading dialog when an AJAX request is made