CODEWITHSUNDEEP
javascriptember.js
Shahinyanm
Shahinyanm

Reputation: 11

ember js params is exists

So I need to do so that clicking on the store would stop the page with the goods of this store. When passing the store's id through the link URL changes but in the product's route model(params) the params is empty


Model name (product?)

import DS from 'ember-data';
import { empty } from '@ember/object/computed';

export default DS.Model.extend({
  name: DS.attr('string'),
  quantity: DS.attr('string'),
  price: DS.attr('string'),
  shops: DS.belongsTo('shop', {asynq: true}),
  isNotValid: empty('name'),
});


Model name (shop?)

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  address: DS.attr('string'),
  phone: DS.attr('string'),
  products: DS.hasMany('product',{asynq: true}),
});


Controller name (?)

import Controller from '@ember/controller';

export default Controller.extend({
  isNew: false,

  actions: {

    newProduct() {
      this.toggleProperty('isNew');
    },

    cancelNewProducts() {
      this.set('isNew', false);
    },

    addNewProduct() {
      const name = this.get('name');
      const quantity = this.get('quantity');
      const price = this.get('price');

      let shop = this.get('store').peekRecord('shop', );
      let product = this.get('store').createRecord('product', { name,quantity,price });
      shop.get('products').pushObject(product);
      product.save().then( function() {
        shop.save();
      });
      product.save().then( ()=> this.set('isNew',false));
    },

  },

});


Route name (?)

import Route from '@ember/routing/route';

export default Route.extend({

  model(params) {
    console.log(params.shop_id);   
    return this.store.query('product', {shops:params.shop_id});
  },

  actions: {

    deleteProduct(product) {
      let confirmation = confirm('Are you sure?');

      if (confirmation) {
        product.destroyRecord();
      }
    },

    editProducts(product) {
      console.log(id)
      product.set('isEditing', true);
    },

    cancelProductsEdit(product) {
      product.set('isEditing', false);
      product.rollbackAttributes();
    },

    saveProducts(product) {
      if (product.get('isNotValid')) {
        return;
      }
      product.set('isEditing', false);
      product.save();
    },

  },
});


Router

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('shops', function() {
  this.route('new');
  this.route('edit', { path: '/:shop_id/edit' });
});

  this.route('products', { path: '/:shop_id/products' }); // this should be in the map, right?

}); // ?
export default Router;

My problem is that I can not make a request to the server and get the goods only from the store with the available id.But when I click on any store displays all the goods. AND i can't access params(shop_id) from shops in my controller,

Upvotes: 0

Views: 125

Answers (1)

sheriffderek
sheriffderek

Reputation: 9053

I just did a pretty invasive reformatting of your program. Take note of the router. Looks like there are some mistakes in there. Also, you don't provide an id to 'peek' with. In your controller. We also don't know how those files are connected or what their names are. You should edit on top of my formatting to help clarify. {async: true} is spelled with a q in your program.

As far as your question... I'll try and reword it. The word 'store' is confusing... because of the data 'store' that we are used to talking about. I think you mean that you have a 'shop' resource and that you want to 'click' on the shop... (likely a component in an each loop) and then you say you want to 'stop' the page with the goods(products) - so... maybe you mean 'stock' or 'show' the products for that shop. This could be in the component (if only a few) - or you could shoot over to a 'detail' page for the shop - that displayed all of the products for that shop. Because you mention params and ID, I think you mean to go the detail route.

This is my best guess at your question: "I have resources for 'shop' and 'product.' I'm building a UI where shops are listed. I would like to make the shops clickable and when clicked, transition to the shop detail page - where I can list all associated products. My link-to helper(not shown here) takes in a shop ID - but the transition is not successful and the params isn't recognized. What am I doing wrong?"

For this question, you could likely create a more simplified version in an ember-twiddle to get to the bottom of things. We don't really need most of those actions to get to the source of the confusion.

It's admitedly hard to show these things / when you have a server - or a mirage server or whatever your setup is. Here's an example of the routing I would suggest - with some basic dummy data - in an embertwiddle. The data isn't real ember objects / but see the link-to and the shop detail route for what you'd likely use. Good luck!

Other notes:

  • ember-data uses an attribute called isNew for records - so, you may want to think of a different name for what you're doing /

Upvotes: 1

Related Questions