Just getting started with Ember and have a question about the ember way to handle a common pattern.
I have a have the following router.js:
export default Router.map(function() {
this.resource('posts', function(){
this.route('post', { path: "/:title" });
this.route('new');
});
});
I'm wondering how to use the value of the post title as the dynamic segment so that post urls show up as /posts/my-post-title-here
I'm confused as to which model this is being looked up on or if there is an "ember way" to handle this common patter (besides using the posts_id for the dynamic segment).
All my posts are defined in routes/posts.js, so I thought I simply needed to lookup the values in this route inside of my routes/post.js route, like this:
export default Ember.Route.extend({
model: function(params) {
var posts = this.modelFor('posts')
return posts.findBy('title', params.title);
}
});
I'm seeing the /posts/:title route in my Ember inspector, but in the browser, the links are all undefined ( /posts/undefined ).
{{#each model as |post|}}
{{#link-to "posts.post" model }}
<li>{{post.title}}</li>
{{/link-to}}
{{/each}}
I'd love any advice about the proper way to handle this situation or explanations about how Ember looks up values for nested routes.
You need to setup a serializer on your routes/post.js, like this:
// routes/post.js
export default Ember.Route.extend({
model: function(params) {
var posts = this.modelFor('posts')
return posts.findBy('title', params.title);
},
serialize: function(model) {
return { post_slug: model.get('title') };
}
});
See Dynamic Segments
Related
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'm trying to reload a model and recompute arrangedContent. The model appears to be reloading but arrangedContent is not being recomputed. Sorting data is fine, it's adding and removing data that's causing the issue.
reloadModelData: function () {
this.get('target.router').refresh();
}
My template looks like:
{{#each project in arrangedContent}}
<tr>
<td>{{project.name}}</td>
...
</tr>
{{/each}}
Edit:
routes/projects/index.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function () {
return this.store.findAll('project');
}
});
controllers/projects/index.js
import Ember from 'ember';
export default Ember.Controller.extend(Ember.SortableMixin, {
queryParams: ['sortProperties', 'sortAscending'],
sortProperties: ['name'],
actions: {
...
reloadModelData: function () {
this.get('target.router').refresh();
}
}
});
A button is what is triggering reloadModelData
<button {{action 'reloadModelData'}}>Reload</button>
Your model hook is not being executed in your action. Why? Becouse you are executing #refresh() on targer.router, which is not a current route, but the Router.
So, how can you refresh the model?
There is a convention called data-down-action-up. It supports sending actions up, to the objects that are, let's say, parents for the data to change. Possible solution would be to let your reloadModelData bubble up to the route and handle this action in the route. Then, in that action you could fetch the data again and set them on the controller:
# controller code
reloadModelData: function() {
return true;
}
And in route:
# route code
reloadModelData: function() {
this.store.find('project').then((function(_this) {
return function(projects) {
_this.get('controller').set('model', projects);
};
})(this));
}
If the result from the find will be different than it was, the model related computed properties will for sure recompute.
Here is a working demo in JSBin that compares your and mine solution.
I have these routes in my Ember app:
Router.map(function() {
this.resource('posts', function () {
this.route('show', {path: '/:id'});
});
});
Let's focus on the show route with url /posts/:id
It uses the PostsShowController which looks like this:
import Ember from "ember";
export default Ember.ObjectController.extend({});
And the route file /routes/posts/show.js which looks like this:
import Ember from 'ember';
var PostsIndexRoute = Ember.Route.extend({
model: function() {
return posts[variable];
}
});
var posts = ...
On the fifth line, where it says posts[variable] I want to replace variable with the :id parameter that gets passed in the url. So if I enter localhost:4200/posts/3 I want it to be 3. How do I do this?
Make sure you think through your routes. "/posts" implies that you're looking at all posts while "/post/:id" implies that you're looking at a post by a given id. So you likely want something like:
this.resource('posts');
this.resource('post', { path: 'post/:id' });
This would give you two routes:
/posts
/post/:id
You can then provide corresponding Ember Route objects as follows:
App.PostsRoute = Ember.Route.extend({
model: function () {
// return all posts
}
});
App.PostRoute = Ember.Route.extend({
model: function (params) {
// params.id will be the :id value from the route
// return post by id
}
});
While I am not new to web development, I am quite new to to client-side MVC frameworks. I did some research and decided to give it a go with EmberJS. I went through the TodoMVC guide and it made sense to me...
I have setup a very basic app; index route, two models and one template. I have a server-side php script running that returns some db rows.
One thing that is very confusing me is how to load multiple models on the same route. I have read some information about using a setupController but I am still unclear. In my template I have two tables that I am trying to load with unrelated db rows. In a more traditional web app I would have just issued to sql statements and looped over them to fill the rows. I am having difficulty translating this concept to EmberJS.
How do I load multiple models of unrelated data on the same route?
I am using the latest Ember and Ember Data libs.
Update
although the first answer gives a method for handling it, the second answer explains when it's appropriate and the different methods for when it isn't appropriate.
BEWARE:
You want to be careful about whether or not returning multiple models in your model hook is appropriate. Ask yourself this simple question:
Does my route load dynamic data based on the url using a slug :id? i.e.
this.resource('foo', {path: ':id'});
If you answered yes
Do not attempt to load multiple models from the model hook in that route!!! The reason lies in the way Ember handles linking to routes. If you provide a model when linking to that route ({{link-to 'foo' model}}, transitionTo('foo', model)) it will skip the model hook and use the supplied model. This is probably problematic since you expected multiple models, but only one model would be delivered. Here's an alternative:
Do it in setupController/afterModel
App.IndexRoute = Ember.Route.extend({
model: function(params) {
return $.getJSON('/books/' + params.id);
},
setupController: function(controller, model){
this._super(controller,model);
controller.set('model2', {bird:'is the word'});
}
});
Example: http://emberjs.jsbin.com/cibujahuju/1/edit
If you need it to block the transition (like the model hook does) return a promise from the afterModel hook. You will need to manually keep track of the results from that hook and hook them up to your controller.
App.IndexRoute = Ember.Route.extend({
model: function(params) {
return $.getJSON('/books/' + params.id);
},
afterModel: function(){
var self = this;
return $.getJSON('/authors').then(function(result){
self.set('authors', result);
});
},
setupController: function(controller, model){
this._super(controller,model);
controller.set('authors', this.get('authors'));
}
});
Example: http://emberjs.jsbin.com/diqotehomu/1/edit
If you answered no
Go ahead, let's return multiple models from the route's model hook:
App.IndexRoute = Ember.Route.extend({
model: function() {
return {
model1: ['red', 'yellow', 'blue'],
model2: ['green', 'purple', 'white']
};
}
});
Example: http://emberjs.jsbin.com/tuvozuwa/1/edit
If it's something that needs to be waited on (such as a call to the server, some sort of promise)
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
model1: promise1,
model2: promise2
});
}
});
Example: http://emberjs.jsbin.com/xucepamezu/1/edit
In the case of Ember Data
App.IndexRoute = Ember.Route.extend({
var store = this.store;
model: function() {
return Ember.RSVP.hash({
cats: store.find('cat'),
dogs: store.find('dog')
});
}
});
Example: http://emberjs.jsbin.com/pekohijaku/1/edit
If one is a promise, and the other isn't, it's all good, RSVP will gladly just use that value
App.IndexRoute = Ember.Route.extend({
var store = this.store;
model: function() {
return Ember.RSVP.hash({
cats: store.find('cat'),
dogs: ['pluto', 'mickey']
});
}
});
Example: http://emberjs.jsbin.com/coxexubuwi/1/edit
Mix and match and have fun!
App.IndexRoute = Ember.Route.extend({
var store = this.store;
model: function() {
return Ember.RSVP.hash({
cats: store.find('cat'),
dogs: Ember.RSVP.Promise.cast(['pluto', 'mickey']),
weather: $.getJSON('weather')
});
},
setupController: function(controller, model){
this._super(controller, model);
controller.set('favoritePuppy', model.dogs[0]);
}
});
Example: http://emberjs.jsbin.com/joraruxuca/1/edit
NOTE: for Ember 3.16+ apps, here is the same code, but with updated syntax / patterns: https://stackoverflow.com/a/62500918/356849
The below is for Ember < 3.16, even though the code would work as 3.16+ as fully backwards compatible, but it's not always fun to write older code.
You can use the Ember.RSVP.hash to load several models:
app/routes/index.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return Ember.RSVP.hash({
people: this.store.findAll('person'),
companies: this.store.findAll('company')
});
},
setupController(controller, model) {
this._super(...arguments);
Ember.set(controller, 'people', model.people);
Ember.set(controller, 'companies', model.companies);
}
});
And in your template you can refer to people and companies to get the loaded data:
app/templates/index.js
<h2>People:</h2>
<ul>
{{#each people as |person|}}
<li>{{person.name}}</li>
{{/each}}
</ul>
<h2>Companies:</h2>
<ul>
{{#each companies as |company|}}
<li>{{company.name}}</li>
{{/each}}
</ul>
This is a Twiddle with this sample: https://ember-twiddle.com/c88ce3440ab6201b8d58
Taking the accepted answer, and updating it for Ember 3.16+
app/routes/index.js
import Route from '#ember/routing/route';
import { inject as service } from '#ember/service';
export default class IndexRoute extends Route {
#service store;
async model() {
let [people, companies] = await Promise.all([
this.store.findAll('person'),
this.store.findAll('company'),
]);
return { people, companies };
}
}
Note, it's recommended to not use setupController to setup aliases, as it obfuscates where data is coming from and how it flows from route to template.
So in your template, you can do:
<h2>People:</h2>
<ul>
{{#each #model.people as |person|}}
<li>{{person.name}}</li>
{{/each}}
</ul>
<h2>Companies:</h2>
<ul>
{{#each #model.companies as |company|}}
<li>{{company.name}}</li>
{{/each}}
</ul>
I use something like the answer that Marcio provided but it looks something like this:
var products = Ember.$.ajax({
url: api + 'companies/' + id +'/products',
dataType: 'jsonp',
type: 'POST'
}).then(function(data) {
return data;
});
var clients = Ember.$.ajax({
url: api + 'clients',
dataType: 'jsonp',
type: 'POST'
}).then(function(data) {
return data;
});
var updates = Ember.$.ajax({
url: api + 'companies/' + id + '/updates',
dataType: 'jsonp',
type: 'POST'
}).then(function(data) {
return data;
});
var promises = {
products: products,
clients: clients,
updates: updates
};
return Ember.RSVP.hash(promises).then(function(data) {
return data;
});
If you use Ember Data, it gets even simpler for unrelated models:
import Ember from 'ember';
import DS from 'ember-data';
export default Ember.Route.extend({
setupController: function(controller, model) {
this._super(controller,model);
var model2 = DS.PromiseArray.create({
promise: this.store.find('model2')
});
model2.then(function() {
controller.set('model2', model2)
});
}
});
If you only want to retrieve an object's property for model2, use DS.PromiseObject instead of DS.PromiseArray:
import Ember from 'ember';
import DS from 'ember-data';
export default Ember.Route.extend({
setupController: function(controller, model) {
this._super(controller,model);
var model2 = DS.PromiseObject.create({
promise: this.store.find('model2')
});
model2.then(function() {
controller.set('model2', model2.get('value'))
});
}
});
The latest version of JSON-API as implemented in Ember Data v1.13 supports bundling of different resources in the same request very well, if you don't mind modifying your API endpoints.
In my case, I have a session endpoint. The session relates to a user record, and the user record relates to various models that I always want loaded at all times. It's pretty nice for it all to come in with the one request.
One caveat per the spec is that all of the entities you return should be linked somehow to the primary entity being received. I believe that ember-data will only traverse the explicit relationships when normalizing the JSON.
For other cases, I'm now electing to defer loading of additional models until the page is already loaded, i.e. for separate panels of data or whatever, so at least the page is rendered as quickly as possible. Doing this there's some loss/change with the "automatic" error loading state to be considered.
i'm learning Ember.js but i'm struggling to figure out why my routes aren't working properly.
Here are the relevant parts of my app.js:
// Routes
App.Router.map(function() {
this.resource('posts', { path: '/posts' });
this.resource('post', { path: '/post/:id' });
});
// Handle route for posts list
App.PostsRoute = Ember.Route.extend({
model: function() {
return App.Post.findAll();
}
});
// Handle route for single post
App.PostRoute = Ember.Route.extend({
model: function(params){
return App.Post.findById(params.id);
}
});
// Post model
App.Post = Ember.Object.extend();
App.Post.reopenClass({
findAll: function(){
var posts = [];
$.getJSON("/api/posts").then(function(response){
response.posts.forEach(function(post){
posts.pushObject(App.Post.create(post));
});
});
return posts;
},
findById: function(id){
$.getJSON("/api/post/" + id).then(function(response){
return App.Post.create(response.post);
});
}
});
Then in my template I have this:
<!-- Post list -->
<script type="text/x-handlebars" data-template-name="posts">
<div class="large-12 columns">
<h1>Posts</h1>
<hr>
<ul>
{{#each post in model}}
<li>{{#linkTo 'post' post}}{{post.title}}{{/linkTo}}</li>
{{/each}}
</ul>
</div>
</script>
<!-- Single post -->
<script type="text/x-handlebars" data-template-name="post">
<div class="large-12 columns">
<h1>{{title}}</h1>
<div class="content">
{{post_content}}
</div>
</div>
</script>
I'm having a few issues here. Firstly, the href attribute on the links in the post list are coming out like this:
#/post/<App.Post:ember217>
I can fix this by changing my post route to:
this.resource('post', { path: '/post/:post_id' });
But then when I try to navigate directly to a post by using a URL like /#/post/1 I get an error:
Assertion failed: Cannot call get with 'id' on an undefined object.
Finally, if I leave my post route how it is (/post/:id) then visit the URL /#/post/1 none of the post data is displayed. I can see the correct API endpoint is called and no errors are shown in the console.
However, if i click through to the single post from the posts list the post is displayed properly but it uses the weird URL that I mentioned earlier - #/post/<App.Post:ember217>.
If this helps, this is the JSON the post models are created from:
{"post":
{
"id":2,
"title":"Second post",
"alias":"second-post",
"postedOn":"2013-08-12 09:11:37",
"authorId":1,
"post_content":"Post content"
}
}
Sorry i know there's quite a bit there - I hope it's enough to give a clear picture of what I'm doing wrong.
Thank you
You are receiving this url #/post/<App.Post:ember217> because your dynamic segment is /post/:id, you have to change to yourmodel_id, in your case is /post/:post_id. Using this, by default the route serialize method will know that you want the id atribute of the post, in the url: /post/1, /post/2 etc. And no override will be needed in that case.
You have said that changing to post_id make the url generation works, but the navigation no, when navigate to url directly, but the problem isn't the routing, I think that is because you are using:
App.Post.findById(params.id);
You have to update to:
App.Post.findById(params.post_id);
Other problem that I see (don't know if is a typo mistake), you forget the return in ajax call:
findById: function(id){
// you must return the ajax
return $.getJSON("/api/post/" + id).then(function(response){
return App.Post.create(response.post);
});
}
I hope it helps.
Ember likes your objects to have an id property for generating the url. If you are going to use something other than id in the route (such as :post_id) you'll need tell Ember how to deserialize your model for generating the url.
App.PostRoute = Ember.Route.extend({
model: function(params){
return App.Post.findById(params.id);
},
serialize: function(model) {
return { id: model.get('id') };
}
});
App.PostRoute = Ember.Route.extend({
model: function(params){
return App.Post.findById(params.id);
},
serialize: function(model) {
return { post_id: model.get('post_id') };
}
});