Ember.js: Storing function prototypes as objects

Question

Ember.js: Storing function prototypes as objects

My interface consists of four vertical panels:

The first panel displays the menu for selecting data
The second panel allows you to choose a filter from a list
The third panel shows the results based on the selected filter
The fourth panel displays detailed information about a specific item

To implement this UI, I am using Nested Routes and Outlets:

App.Router.map(function() {
    this.resource('customers', { 'path' : '/customers' }, function() {
        this.resource('customers_filters', { 'path' : '/:filter' }, function() {
            this.resource('customer', { 'path' : '/show/:customer_id' });
        });
    });
});

Everything works fine except for when I try to show the details of a specific item. The hash in the URL is not correct.

First route is OK: #/customers
Second route is OK: #/customers/all
Third route is NOT OK: #/customers/function filter() { [native code] }/show/2

An example is available on JsBin: http://jsbin.com/iNAGaVo/1

What am I doing wrong? Thank you.

javascript ember.js nested-routes

Answer 1

Answer №1

An issue arises in Ember when constructing the URL based on the models for each route. In the case below the active/all route, the framework uses an array of items without a "filter" field, making it unclear how to determine if the current model is all or filtered. To address this, it's recommended to ensure that the slug (represented by ":value" in the path) matches a property on the model.

If there is no match, one can override the serialize method in the route to guide Ember in serializing the model for the URL.

App.CustomersFiltersRoute = Ember.Route.extend({
  model: function(params) {

    if(params.filter == "active") {
      return _.where(App.Customers, {isActive: true});
    }

    return App.Customers;
  },

  serialize: function(model){
    if(model === App.Customers){
      return {filter:'all'}; 
    }
    return {filter:'active'};
  }
});

http://jsbin.com/iNAGaVo/6/edit

Answer 2

An issue arises in Ember when constructing the URL based on the models for each route. In the case below the active/all route, the framework uses an array of items without a "filter" field, making it unclear how to determine if the current model is all or filtered. To address this, it's recommended to ensure that the slug (represented by ":value" in the path) matches a property on the model.

If there is no match, one can override the serialize method in the route to guide Ember in serializing the model for the URL.

App.CustomersFiltersRoute = Ember.Route.extend({
  model: function(params) {

    if(params.filter == "active") {
      return _.where(App.Customers, {isActive: true});
    }

    return App.Customers;
  },

  serialize: function(model){
    if(model === App.Customers){
      return {filter:'all'}; 
    }
    return {filter:'active'};
  }
});

http://jsbin.com/iNAGaVo/6/edit

Ember.js: Storing function prototypes as objects

Answer №1

Similar questions

Updating an object property within an array in Angular Typescript does not reflect changes in the view

Unable to detect the click event on Bootstrap accordion

Utilize the fetch function to showcase information retrieved from a specific endpoint on a webpage using Javascript

Assign Monday as the selected day of the week in the MUI Datepicker 6

AngularJS restricts inputs to be read-only

Nested Angular click events triggering within each other

Ways to deactivate remaining buttons until a function call finishes after selecting one in a react render() function?

Which library do you typically employ for converting .mov files to mp4 format within a React application using Typescript?

Leveraging AngularJS ngBind with a JavaScript object

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

Performing a Javascript ajax post of a canvas snapshot in "image/jpeg" format to an asp.net web form

Creating Location-Specific Customer Data using AngularJS similar to Google Analytics

Unable to call Success function in JQuery AJAX request

Guide on utilizing Vue to trigger an API call when the input box loses focus

Mastering MongoDB update functions in JavaScript

JQuery is blocking the submission of an HTML form

Disappear text gradually while scrolling horizontally

Refreshing a data object that is shared among Vue components

I have successfully set up micro-cors on my system, and as I tried to compile, I received the following outcome

Discovering the meeting point where two dives converge