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,
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 /
Related
UPDATE:
Can anyone help? I have been pursuing this without luck for the better half of this week. I do notice that the client is generating two POSTs. I have added code for the adapter. Is there anywhere else I should be looking?
I am going through the video tutorial provided below and am unable to resolve two errors when I click the submit button to save data to the database.
No model was found for 'user'
Two POSTs are being generated. This results in an Assertion Failed error, which I suspect is because the ID returned from the server does not match the current ID on the front-end.
I see that the database has two new records. When I click on the submit button again then the application takes me back to the todo-items page where it shows the two records. Can anyone advise what I am doing wrong?
Current versions:
Ember : 3.2.2
Ember Data : 3.2.0
jQuery : 3.3.1
Ember Simple Auth : 1.7.0
Video tutorial (the error occurs at the 11:30 mark): https://www.youtube.com/watch?v=bZ1D_aYGJnU. Note: the author of the video seems to have gotten the duplicate POST issue to go away right at the end of the video, but I do not see how.
Component/forms/todo-item-form/component.js
import Component from '#ember/component';
export default Component.extend({
actions:{
save(){
this.get('submit')();
}
}
});
Component/forms/todo-item-form/template.hbs
<form {{action "save" on="submit"}}>
{{input placeholder="description" value=todoItem.description}}
<br />
{{#if todoItem.validations.isValid}}
<button type="submit">Add</button>
{{else}}
<button type="submit" disabled>Add</button>
{{/if}}
</form>
templates/s/todo-items/add.hbs
{{forms/todo-item-form
todoItem=model
submit=(route-action "submitAction")
}}
{{outlet}}
models/todo-item.js
import DS from 'ember-data';
import { validator, buildValidations } from 'ember-cp-validations';
const { attr, belongsTo } = DS;
const Validations = buildValidations({
description: [
validator('presence', true),
validator('length', {
min: 4
})
]
});
export default DS.Model.extend(Validations, {
description: attr('string'),
owner: belongsTo('person')
});
adapter/Application.js
import DS from 'ember-data';
import ENV from 'todo-list-client/config/environment';
const {computed, inject :{service} } = Ember;
export default DS.JSONAPIAdapter.extend({
session: service(),
namespace: ENV.APP.namespace,
host: ENV.APP.host,
headers: computed('session.data.authenticated.token', function() {
let token = this.get('session.data.authenticated.access_token');
return { Authorization: `Bearer ${token}` };
}),
})
routes/s/todo-items/add.js
import Route from '#ember/routing/route';
export default Route.extend({
model(){
return this.store.createRecord('todo-item');
},
actions: {
submitAction() {
this.get('controller.model')
.save()
.then(() => {
this.transitionTo('s.todo-items');
});
}
},
});
The author adds Ember-Data-Route at about 15m5s for the add.js route as a mixin. This cleans up after the model.
He starts the explanation at that point, adds it in over the next minute or two in the video:
https://youtu.be/bZ1D_aYGJnU?t=15m5s
import Ember from 'ember';
import DataRoute from 'ember-data-route';
export default Ember.Route.extend(DataRoute, {
model() {
return this.store.createRecord('todo-item');
},
actions: {
save() {
this.get('controller.model')
.save()
.then(() => {
this.transitionTo('s.todo-items');
});
}
},
});
I am trying to build an smarthome app and I am stuck with calling nested routes with serveral parameters. I want to show an information which user is logged in and below that template which is in my parent route i want to render child pages for showing households. After a specific household is chosen, i want to show the rooms in the household and then devices. This is my router.js
Router.map(function() {
this.route('about');
this.route('users', function() {
});
this.route('households', { path: '/:user_id' }, function() {
this.route('index', { path: '/:user_id' })
this.route('rooms',{ path: '/:household_id' });
this.route('devices', { path: '/:room_id' });
});
});
export default Router;
I link to households like this
<h3>{{#link-to "households" user.id}}{{user.surname}}{{/link-to}}</h3>
and now I want to declare a model in the route of households.js which returns an user from the ember data store and render the parent template. Afterwards the model should redirect to households.index with the user.id too and the households.index.hbs should render all households below the parent template.
My households.js route looks like this:
export default Route.extend({
model(params){
{
return this.get('store').findRecord('user', params.user_id);
}
}
});
and my household.index route like this
export default Route.extend({
model(params) {
return this.get('store').findAll('household').then(results => results.filter((site) => {
return site.get('member').filter(x => x == params.user_id).length > 0;
}));
}
});
Actually the following error occurs:
Error: Assertion Failed: You
attempted to define a {{link-to "households.rooms"}} but did not
pass the parameters required for generating its dynamic segments. You
must provide param user_id to generate.
In general I need serveral parameters in all nested routes/subroutes, because I need the user_id for example in the route devices for checking if the calling user is a admin. If he is an admin he would be able to add and edit devices. And i need the room_id to show only devices which are in the chosen room.
Is there any way to pass serveral parameters or using the controllers in a way, I can handle my purpose?
In my understanding, you haven't set up the routing hierarchy well.
Assuming that you have multiple users, and every user has multiple households, and every household has multiple rooms, I suggest you make your router.js like this:
Router.map(function() {
this.route('about');
this.route('users', function() {
this.route('index'); // Lists all the users, URL looks like /users
this.route('single', { path: '/:user_id' }, function() {
this.route('index'); // Shows a single user, URL looks like /users/123
this.route('households', function() {
this.route('index'); // Shows all households a user with user_id has, URL looks like /users/123/households
this.route('single',{ path: '/:household_id' }, function() {
this.route('index'); // Shows a single household, URL looks like /users/123/households/456
this.route('rooms', function() {
this.route('index'); // Shows all rooms a household with household_id has, URL looks like /users/123/households/456/rooms
this.route('single', { path: '/:room_id' }); // Shows a single room, URL looks like /users/123/households/456/rooms/789
});
});
});
});
});
});
Feel free to omit this.route('index'); lines in the router if you want, but make sure you make a route to handle this. Your templates should look something like this.
// templates/users.hbs
{{outlet}}
// templates/users/index.hbs
<h1>This shows all the users</h1>
<ul>
{{#each model as |user|}}
<li>{{user.name}}</li>
{{/each}}
</ul>
// templates/users/single.hbs
{{outlet}}
// templates/users/single/index.hbs
<h1>This shows a single user with id {{model.id}}</h1>
<p>This is the user named {{model.name}}.</p>
// templates/users/single/households.hbs
{{outlet}}
// ... And so on
You should implement model() hooks in such a way that they fetch only what you really need. For the lists, you fetch them in the index route.js of the type you want to display (i.e. the model() of routes/users/index.js for users), and for the single record not in the index, but in the single route.js (i.e. for a single household in the model() of routes/users/single/households/single.js) to make that model accessible to both the index route and the child routes.
So, with this configuration, your links should look something like this:
// All users
{{#link-to 'users'}}All users{{/link-to}}
// Single user
{{#link-to 'users.single' user.id}}{{user.name}}{{/link-to}}
// Households of a single user
{{#link-to 'users.single.households' user.id}}All households of {{user.name}}{{/link-to}}
// Specific household of a single user
{{#link-to 'users.single.households.single' user.id household.id}}Household {{household.name}} of {{user.name}}{{/link-to}}
// Rooms within a specific household
{{#link-to 'users.single.households.single.rooms' user.id household.id}}All rooms within household {{household.name}} of {{user.name}}{{/link-to}}
Note: Make sure to specify models and their relationships properly to make your life easier from the very beginning. So, for the configuration assumed at the beginning of this answer, you should make your models something like this:
// models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
households: DS.hasMany('household')
});
// models/household.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
user: DS.belongsTo('user'),
rooms: DS.hasMany('room')
});
// models/room.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
household: DS.belongsTo('household')
});
If you organize your models like this, then Ember will let you link from a rooms page (route) to the user's page like this:
{{#link-to 'users.single' model.household.user}}Go to user{{/link-to}}
I am a beginner in Ember and trying to implement a simple post and comment app.
I have a rails background and hence i'm using Rails API for this.
I have followed a tutorial and i'm able to save a post, fetch all its comments and delete the post. However i'm having issues in saving comment related to the post.
Following is the code for models
post.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
comments: DS.hasMany('comment')
});
comment.js
import DS from 'ember-data';
export default DS.Model.extend({
author: DS.attr('string'),
body: DS.attr('string'),
post: DS.belongsTo('post')
});
routes/post/comment/new.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return {};
},
renderTemplate() {
this.render('post.comment.new', { into: 'application' });
},
actions: {
save() {
const post = this.modelFor('post');
const newComment = this.get('store').createRecord('comment', this.currentModel);
newComment.set('post', post);
newComment.save().then(() => {
this.transitionTo('post', post);
});
},
cancel() {
this.transitionTo('post', this.modelFor('post'));
}
}
});
router.js
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
this.route('posts');
this.route('post.new', { path: 'posts/new' });
this.resource('post', { path: 'posts/:post_id' }, function() {
this.route('comment.new', { path: 'comments/new' });
});
});
export default Router;
Saving the comment is where i'm facing an issue. This is really strange but while saving the comment, the params passed to the server looks like
Parameters: {"comment"=>{"author"=>"dsa", "body"=>"asd", "post"=>"9"}}
Unpermitted parameter: post
From what i understand, the parameter should be post_id and not post. If post is being passed, then it should be object. I may be wrong of course because i don't have a clear understanding in Ember yet.
On randomly fiddling with the code, i found that if i replace the relationship in comments model from
post: DS.belongsTo('post')
to
post_id: DS.belongsTo('post')
the params passed to server are
Parameters: {"comment"=>{"author"=>"fg", "body"=>"dfs", "post_id"=>nil}}
This however doesn't actually pass the post_id as its nil.
This might be absolutely wrong and not how its supposed to work but i'm clueless.
Thanks for any help.
Create comment serializer and override keyForRelationship method like below :
keyForRelationship(key/*, relationship, method*/) {
if(key === 'post') return 'post_id';
return this._super(...arguments);
}
and the post relation should be :
post: DS.belongsTo('post')
I'm trying to reload store data from the server after transitioning to a page.
The transition i'm referring in this case, is from an index page, to a specific page by id.
here is my code:
App.Board = DS.Model.extend({
title: DS.attr('string'),
boardItems: DS.hasMany('BoardItem'),
});
App.BoardItem = DS.Model.extend({
title: DS.attr('string'),
board: DS.belongsTo('Board')
});
App.BoardIndexRoute = Ember.Route.extend({
model: function() {
return {
title: 'Boards List',
boardItems: this.store.find('board')
}
}
});
App.BoardShowRoute = Ember.Route.extend({
model: function(params) {
// this.store.reloadRecord('BoardItem'); - tried this, didn't work :(
var boardData = this.store.findById('board', params.board_id);
return boardData;
}
});
what happens is:
Index - loads a list of boards, with empty boardItems array (I don't want to load all of the data on the index)
Then clicking a link to a specific board, transitions to it, but the data is empty and no requests made to the server.
I tried various ways of reloading it, but all fails...
here is the debug info if it might help:
DEBUG: Ember : 1.5.1 ember.js:3521
DEBUG: Ember Data : 1.0.0-beta.7.f87cba88 ember.js:3521
DEBUG: Handlebars : 1.1.2 ember.js:3521
DEBUG: jQuery : 2.1.0
Thanks!
Finding Records: If you provide a number or string as the second argument to store.find(), Ember Data will attempt to retrieve a record of that with that ID. This will return a promise that fulfills with the requested record:
App.BoardShowRoute = Ember.Route.extend({
model: function(params) {
// Providing both the model name, and board identifier
// Make sure the parameter exists.
// console.debug('My board identifier is', params.board_id');
return this.store.find('board', params.board_id); // => GET /boards/:board_id
}
});
I'm pretty new to Ember.js and am building an app to pick up some Ember chops. I wanted to use a computed property in one of my models as a route but it seems something isn't working correctly. I'm using FIXTURES by the way.
What I'm trying to achieve is /peeps/john-smith instead of /peeps/1
I've got my model setup like this:
App.Peep = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
slug: function(){
this.get('firstName').toLowerCase() + '-' + this.get('lastName').toLowerCase();
}.property('firstName', 'lastName')
});
My router setup is like this:
App.Router.map(function(){
this.resource('peep', { path: '/peeps/:peep_slug'});
});
App.PeepRoute = Ember.Route.extend({
model: function(params){
return this.store.find('peep', params.peep_slug);
},
serialize: function(model){
return { peep_slug: model.get('slug') };
}
});
When I navigate to /peeps/john-smith in the browser, I get this warning in my console You made a request for a peep with id john-smith.
Is there something I'm missing?
By default it searches by id param, so you could either change the adapter to make it search by slug or try to add id as Ember.computed.alias('slug').