Steer clear of displaying the latest model directly

Question

Steer clear of displaying the latest model directly

Currently, I have a form for creating a new Model named Route. This form includes a select field called takeover, which displays all existing Routes for the user to choose from and establish a relationship with the selected Route. The issue I am facing is that the newly created Route is also appearing in the select field, because I am using 'this.get('store').findAll('routes')' method. How can I prevent the newly created Model from being displayed in the selection dropdown, as it is not possible to create a relationship with itself.

Within the Route file, I start by initializing an empty Model which users can then fill out using the form:

//route.js
model() {
    return this.store.createRecord('route', {});
  },

Template:

//route.hbs
<form>
//input fields
//select-component code:
{{my-select
    selected=model.takeover
    options=routes
}}
</form>

The routes available for selection are defined within the route file:

//route.js
 routes: Ember.computed(function () {
    return this.get('store').findAll('route');
  }).readOnly(),

At the moment, the list of selectable options includes all routes, including the new model. However, it should not be possible to select the model itself, so I need to remove it from the options. How can I achieve this?

javascript ember.js ember-data store

Answer 1

Answer №1

A computed property can be utilized to filter out records that are not new.

routes: Ember.computed.filterBy('model', 'isNew', false)

The isNew property is true for models that have not been saved yet using .save(). More information can be found here:

It is advisable to keep the store request separate from the computed property (CP) used for filtering the list. The logic for making a request to the backend/store should remain in the model hook, while the CP for filtering can reside in the controller where the result is sent.

Edit made in response to a comment:

The "Ember way"

In Ember, it is preferred for requests to the backend to be handled in the route file. The route has access to the store and provides built-in async error handling. Typically, you would make the request in the model hook like so:

// route.js
model() {
  return this.get('store').findAll('route');
}

If you need to create a new record as well, you can do it as follows:

// route.js
model() {
  this.get('store').createRecord('route');
  return this.get('store').findAll('route');
}

The result of the model hook is passed to the setupController method, which automatically builds the controller object. The controller then communicates the model to the view by default:

setupController(controller, model) {
  controller.set('model', model);
}

Adding a computed property to the controller can now be done. If there isn't a controller.js file by default, one can be generated with Ember-CLI:

ember g controller <route-name>

Since the model was passed to our controller, we can create a computed property to filter the model:

// controller.js
routes: Ember.computed.filterBy('model', 'isNew', false)

This will provide an array of all the route records that are not "new." Now the view should have access to routes.

//route.hbs
<form>
//some fields
//and a select-component:
{{my-select
    selected=model.takeover
    options=routes
}}
</form>

If unsure about what model.takeover refers to, similar filtering can be applied to retrieve only the record that is considered new based on the isNew property.

Answer 2

A computed property can be utilized to filter out records that are not new.

routes: Ember.computed.filterBy('model', 'isNew', false)

The isNew property is true for models that have not been saved yet using .save(). More information can be found here:

It is advisable to keep the store request separate from the computed property (CP) used for filtering the list. The logic for making a request to the backend/store should remain in the model hook, while the CP for filtering can reside in the controller where the result is sent.

Edit made in response to a comment:

The "Ember way"

In Ember, it is preferred for requests to the backend to be handled in the route file. The route has access to the store and provides built-in async error handling. Typically, you would make the request in the model hook like so:

// route.js
model() {
  return this.get('store').findAll('route');
}

If you need to create a new record as well, you can do it as follows:

// route.js
model() {
  this.get('store').createRecord('route');
  return this.get('store').findAll('route');
}

The result of the model hook is passed to the setupController method, which automatically builds the controller object. The controller then communicates the model to the view by default:

setupController(controller, model) {
  controller.set('model', model);
}

Adding a computed property to the controller can now be done. If there isn't a controller.js file by default, one can be generated with Ember-CLI:

ember g controller <route-name>

Since the model was passed to our controller, we can create a computed property to filter the model:

// controller.js
routes: Ember.computed.filterBy('model', 'isNew', false)

This will provide an array of all the route records that are not "new." Now the view should have access to routes.

//route.hbs
<form>
//some fields
//and a select-component:
{{my-select
    selected=model.takeover
    options=routes
}}
</form>

If unsure about what model.takeover refers to, similar filtering can be applied to retrieve only the record that is considered new based on the isNew property.

Answer 3

Answer №2

Give this a shot,

routes: Ember.computed(function () {
    return this.get('store').findAll('route').then(function(result){
     return result.filterBy('isNew', false);
    });
  }).readOnly(),

Update:

Consider using different names than route or routes for your route name and computed property name.

In route.js

model(){
 return Ember.RSVP.hash({
  newRecord: this.store.createRecord('route', {}),
  routes : this.get('store').findAll('route').then(function(result){
     return result.filterBy('isNew', false);
    }),
  });
},
setupController(controller,model){
 this._super(...arguments);
 controller.set('NewRecordModel',model.newRecord);
 controller.set('routes',model.routes);
}

and in route.hbs template,

{{my-select
    selected=NewRecordModel.takeover
    options=routes
}}

Answer 4

Give this a shot,

routes: Ember.computed(function () {
    return this.get('store').findAll('route').then(function(result){
     return result.filterBy('isNew', false);
    });
  }).readOnly(),

Update:

Consider using different names than route or routes for your route name and computed property name.

In route.js

model(){
 return Ember.RSVP.hash({
  newRecord: this.store.createRecord('route', {}),
  routes : this.get('store').findAll('route').then(function(result){
     return result.filterBy('isNew', false);
    }),
  });
},
setupController(controller,model){
 this._super(...arguments);
 controller.set('NewRecordModel',model.newRecord);
 controller.set('routes',model.routes);
}

and in route.hbs template,

{{my-select
    selected=NewRecordModel.takeover
    options=routes
}}

Steer clear of displaying the latest model directly

Answer №1

The "Ember way"

Answer №2

Similar questions

Embed a static label inside an input field that remains constant even while text is inputted, without using a placeholder. Crafted using HTML,

Issue with Multiple File Upload Functionality in Dropzone.js + Laravel (Only allowing one file to be uploaded)

The Chrome (version 58) webdriverio is currently inactive, while Firefox is up and running

Steps for setting the value of a textbox within a bootstrap popover

Ways to avoid browser refresh when uploading files in React applications

What steps can I take to display a download button when a file is clicked on?

AngularJS controller containing a nested app

Using ReactJS to send formData to an Express API and retrieving a JSON response

Retrieving an HTML element that has been added through DOM manipulation

Canvas Frustratingly Covers Headline

Encountered the error message "Router.js file throwing a TypeError: next is not a function" while implementing navigation guards in my Vue 3 project

Utilizing unique background images tailored to different screen resolutions

The focus and blur events for the document in a content editable iframe are not activated by Chrome

What could be the reason for the inability of my external jQuery file to be implemented on a className within React

Utilizing the 'input' method to modify the key of an array object within specified elements in a Vue.js application

Angular routes are failing to update the view even after attempting to refresh

Steps for inserting an additional header in an Angular table

Selenium webdriver cannot find the element within the JavaScript code

Utilizing Inquiries within Arrays

Encountered a failure while loading modules in AngularJS