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

Using single quotation marks in Javascript

Seems like JavaScript's .active functionality is failing to function properly in my case

Refreshing data and manipulating arrays using AngularJS

`Is there a way to dynamically update a nested field object in Mongoose without updating the entire object?`

Switch off JavaScript beyond the parent element

Trouble with jQuery addClass function when trying to add to a specific object variable

How can we leverage Shared and Core modules alongside Feature modules in Angular development?

What mistake am I making with arrays?

"Want to know the best way to retrieve the most recent form input value using jQuery or Javascript

Iterating through the sorted list in reverse order, retrieving the text of each list item

Div sliding out of view

Getting the ID name from a select tag with JavaScript - A quick guide!

Convert a date from the format of YYYY-MM-DD HH:MM:SS to MM-DD-YYYY using Javascript

Tips for Making Your Popup Window Stand Out

Expanding div width with jQuery as a percentage

From HTML to Mat Table: Transforming tables for Angular

Deactivating Touchable Opacity Sounds in React Native

Understanding and aggregating data from JSON files

Issue with React hook state persistence in recursive function

How to disable click event binding in Angular2 after it has been clicked once