I'm new to Ember, and I think I bit off more than I can chew with this practice app, but I intend to learn. I might be completely conceptually off, if so, feel free to offer a better structure for my use case.
My (abbreviated) routing looks more or less like this:
Router.map(function() {
this.resource('shops', { path: '/' }, function() {
this.resource('shop', { path: ':shop_id' }, function() {
this.resource('items', { path: 'admin'}, function() {
});
});
});
});
The intention is that the user will select a shop, then get a list of all possible items with checkboxes where he can decide which are available in that shop and which aren't. So far, I'm just trying to display the list of all items, but it's not working. However, the list of shops - no problem whatsoever.
URL: /
Works. model is all shops.
URL: /1
Works. model is the shop with ID 1.
URL: /1/admin
Error while processing route: items.index Assertion Failed: ArrayProxy expects an Array or Ember.ArrayProxy, but you passed object
Both shops and items controllers are identical:
// app/controllers/shops.js
// app/controllers/items.js
export default Ember.ArrayController.extend({});
The routes are nearly identical:
// app/routes/shops/index.js
export default Ember.Route.extend({
model: function() {
return this.store.find('shop');
}
});
// app/routes/items/index.js
export default Ember.Route.extend({
model: function() {
return this.store.find('item');
}
});
The shop controller does not exist, and the shop.index route is trivial:
// app/routes/shop/index.js
export default Ember.Route.extend({});
What gives?
EDIT: JSBin
The problem with your JSBin turns out to be rather simple. In the simplified router in your original post you have this.resource('items', { path: 'admin'}, function() {});.
Since you pass a function to this.resource that means it has an implicit nested this.route('index').
However, in your JSBin, you have this.resource('items, { path: 'admin' });.
Since you are not passing a function in this case, there is no implicit index route.
The solution is either to add the function bit, or rename App.ItemsIndexRoute to App.ItemsRoute and data-template-name="items/index" to data-template-name="items".
JSBin with the latter: http://emberjs.jsbin.com/dahuge/2/edit?html,js
P.S. I've also prepared a JSBin using just this.route which is currently more future-friendly: http://jsbin.com/mifamu/9/edit?html,js,output
Answered on IRC by one very helpful "locks". Some problems remain, but the big question has been answered with this JSBin. My biggest confusion came from misunderstanding how URLs are handled, and what the role of link-to helper was. What I needed most was the change in the ItemsController:
App.ItemsController = Ember.ArrayController.extend({
needs: ['shop'],
shop: Ember.computed.alias('controllers.shop.model')
});
which would make shop accessible, and a mistake in a template saying items instead of model.
Related
So, I have two paths in my route. I created the two routes as the doc recommends.
My router is the following:
// router.js
Router.map(function() {
this.route('photos');
this.route('photo', { path: '/photo/:photo_id' });
});
If I visit firstly the route /photo/ID and then go to /photos, it will only show one object on the latter. (wrong)
If I visit /photos first it shows all the objects and I can go to /photo/ID later on and it will be fine. (right)
I want to make it work both ways. How to do this? You can see my code for each route down below:
// photo.js
export default Ember.Route.extend({
model(params) {
return this.get('store').findRecord('photo', params.photo_id);
}
});
// photos.js
export default Ember.Route.extend({
setupController(controller, model) {
let photos = this.get('store').findAll('photo');
console.log('add all...');
// convert to an array so I can modify it later
photos.then(()=> {
controller.set('photos', photos.toArray());
});
},
});
I can always call the findAll() function regardless where the user goes, but I don't think this is smart.
The way I am dealing with the page transitions:
To go to photos I use:
{{#link-to 'photos'}}All{{/link-to}}
To go to /photo/ID I inject the service '-routing' and I use in one event click like this:
routing: Ember.inject.service('-routing'),
actions() {
selectRow(row) {
this.get("routing").transitionTo('photo', [row.get('id')]);
}
}
findAll will get it from a store and return immediately and later on it will request the server and update the store. but in your case, as you are not using route model hook, so this live array will not be updated so it will not reflect it in the template.
If I visit firstly the route /photo/ID and then go to /photos, it will
only show one object on the latter.
In the above case, store will contain only one reocrd, so when you ask for store data using findAll it will return the existing single record.
Another option is,
avoiding this photos.toArray() - It will break live-array update, I am not sure why do you need it here. since photos is DS.RecordArray.
Note: It's important to note that DS.RecordArray is not a JavaScript
array, it's an object that implements Ember.Enumerable. This is
important because, for example, if you want to retrieve records by
index, the [] notation will not work--you'll have to use
objectAt(index) instead.
I have a nested route setup as I would like to have my templates nested as well. The route setup looks like this:
...
this.route('posts', function() {
this.route('post', {path: ':post_id'}, function() {
this.route('comments', {path: 'comments'}, function() {
this.route('comment', {path: ':comment_id'});
});
});
});
...
Potentially, my URL could look something like this:
/posts/:post_id/comments/:comment_id
If I navigate via {{link-to}} then I have no problem, however, if I go directly to a specific URL via the browser, that's when things going wrong. Imagine that my comments page lists the comments associated with the post (post_id) I'm looking at. The problem is going there directly, like typing in /posts/123/comments/56 doesn't load the list of comments, only the comment itself. Here is how my routes are setup:
// routes/posts.js
...
model() {
return this.get('store').findAll('post');
}
...
// routes/posts/post.js
...
model(params) {
return this.get('store').findRecord('post', params.post_id);
}
...
// routes/posts/post/comments.js
...
model(params) {
let post=this.modelFor('posts/post');
return post.get('comments');
}
...
// routes/posts/post/comments/comment.js
...
model(params) {
return this.store.findRecord('comment', params.comment_id);
}
...
If I type in /posts/123/comments/56, no list is displayed from the comments.js template.
If I type in /posts/123/comments, only the first comment is displayed from the comments.js.
I'm not sure what I'm doing wrong though I feel like it has something to do with modelFor. How do I properly populate/hydrate the post's comments list when I go directly to a comment in that post URL rather than navigating there via link-to?
UPDATE 1:
Here are the models:
// post.js
export default DS.Model.extend({
title: DS.attr("string"),
articles: DS.hasMany('comment', {async: true})
});
// comment.js
export default DS.Model.extend({
title: DS.attr("string")
});
I've connected it to mirage.
Here is a sample of the comments fixture:
[
{
id: 1,
title: "Apple"
},
...
and the posts fixture:
[
{
id: 1,
title: "A post with fruits for comments",
commentIds: [1, 2]
},
...
UPDATE 2:
I've added my template code for templates/posts/post/comments.js
Comments.js!
{{outlet}}
<ol>
{{#each model as |comment|}}
<li>{{#link-to "posts.post.comments.comment" comment}} {{comment.title}}{{/link-to}}</li>
{{/each}}
</ol>
I've also updated the comment.js route above, reducing its complexity.
Based on your router definitions - the URL /post/123/comments/56 does not exists. Your router defines URL with the following structure /posts/56/comment/123 (notice singular comment not comments) - your route name is comments however you told ember that the path it should resolve is comment - singular. So, try accessing /post/123/comment/56 instead of comments.
Also, no reason to call this.modelFor('posts/post') from nested comments route - all you should need is modeFor('post').
And the last thing, inside the comment route you should only need to look for a give comment no need to resolve the parent model - you already have a unique comment_id - store.findRecord('comment', comment_id) should work.
I am using iron:router in my app and I have a controller that subscribes to one document in a collection by using a parameter in the path. I can access all of the documents in my collection on the server, so I know that there is stuff in there, but when I try to access the data that I subscribe to in the waitOn method of the controller, the data is undefined. Here is the relevant code for this problem.
Router code:
this.route('unit', { path: 'unit/:unitId', template: 'unit', controller: 'UnitController' });
UnitController = BaseController.extend({
waitOn: function () {
return Meteor.subscribe('getUnit', this.params.unitId);
},
data: function () {
var id = this.params.unitId;
templateData = {
unit: Collections.units.model(Collections.units.getUnit(id))
};
return templateData;
}
});
Publication:
Meteor.publish('getUnit', function(id) {
return Collections.units.data.find({ unitId: id });
});
Here I have created an object for various things to do with my collection(I only included the important parts here):
Collections.units = {
data: new Mongo.Collection("units"),
getUnit: function (id) {
return this.data.findOne({ unitId: id });
},
model: function(unitEntity) {
return {
unitId: unitEntity.unitId,
createdAt: unitId.createdAt,
packets: unitEntity.packets,
getLastPacket: function (id) {
return _.last(this.packets);
}
};
}
};
I have been trying to debug this for quite a while and I can do all the things to the collection I want to on the server and in the publish method, but when it gets to the controller, I can't access any of the info. In the data method this.params.unitId returns exactly what I want so that isn't the issue. Where the exception gets thrown is when I try to read properties of unitEntity when I'm making the model but that is just because it is undefined.
Have any ideas what I am doing wrong? Thanks in advance for any responses.
The main problem that I was trying to solve's solution was to wrap the code inside the data method inside of if (this.ready()){ ... } and add an action hook with if (this.data()) { this.render(); }. After I got the subscription to work, I found that Christian was right in the comments with saying that my controller setup might mess things up. It was causing other strange exceptions which I fixed by just moving the hooks to each route instead of using the controller. As for my Collections setup, it may be unconventional, but all of that is working fine (as of right now). I may want to set them up the standard way at a later point, but as of right now its pretty handy for me to do things with the collections with the methods already written in the object.
I am trying to access one of two models in a controller that uses needs on a sibling controller. My router looks like the following:
App.Router.map(function() {
this.route('login');
this.route('mlb.lineups', {path: 'tools/mlb/lineups'})
this.resource('mlb.lineups.site', { path: 'tools/mlb/lineups/site/:site_id' });
});
The mlb.lineups route definition looks like the following:
App.MlbLineupsRoute = Ember.Route.extend({
model: function() {
var self = this;
return Ember.RSVP.hash({
sites: self.store.find('site')
})
},
setupController: function(controller, models) {
controller.set('model', models.get('sites'));
},
afterModel: function(models) {
var site = models.sites.get('firstObject');
this.transitionTo('mlb.lineups.site', site);
}
});
The reason I am using Ember.RSVP.hash({}) here is I plan on adding another model to be retrieved after I retrieve the site model.
Now in my MlbLineupsSiteController I am trying to access the sites model with the following:
App.MlbLineupsSiteController = Ember.ArrayController.extend({
needs: "mlb.lineups",
sites: Ember.computed.alias("controllers.models.sites")
});
This is the error I'm getting in my Ember console: needs must not specify dependencies with periods in their names (mlb.lineups)
What's the best way to make the sites model from the MlbLineups controller available in my MlbLineupsSiteController?
Note:
#NicholasJohn16's answer isn't valid anymore. It always gives an error that controller couldn't be found. Generally you should also never use needs property and always use Ember.inject.controller if you have to make your controllers dependent on each other. I'd also recommend using services instead of dependencies between controllers. It's easier to maintain code which contains communication between controllers through services, than controller directly accessing other controller's properties. You might not always be aware of such access, and using services gives you another layer of security.
Solution:
Tested in Ember.js 1.10.0-beta.4. Use following code in Controller to reference nested controller in needs:
needs: ['classic/about']
Then you can access it later using:
const aboutController = this.get('controllers.classic/about');
const aboutProperty = aboutController.get('customProperty');
Works as expected. Basically you need to replace dots with slashes.
It should be:
needs:" MlbLineupsSite "
Basically, the name of the controller you want to include, minus the word controller.
Everything else you posted should work.
I have these routes
this.resource('politicians');
this.resource('politician', { path: '/politicians/:politician_id', function () {
// Non nested interface so non nested politician route.
this.resource('questions', function () {
this.resource('question', { path: ':question_id' });
});
});
this.resource('questions', function () {
this.resource('question', { path: ':question_id' });
});
I'd like the question route to be rendered anywhere (using a modal) in the app without losing the current context, but still have a specific/unique url for each question, knowing that the question you got from the nested questions route and the non nested ones are the same.
this.resource('question', { path: ':question_id' });
The thing is that I don't want to make a custom outlet for that because then I won't have a url for each question.
This sort of problem is best solved by using query-params and hooking up the modal based on params. If you don't want to do that you're really stuck with building questions into each route if you want it to be URL based.
Here's an example: http://emberjs.jsbin.com/ucanam/3566/edit
What you're looking for is Ember's {{render}} helper. Simply place a {{render 'question' questionModel}} inside the modal you wish to use.
You can learn about the render helper here
EDIT:
Here is a jsbin to show the basic idea of how to use a render tag in this way. This jsbin renders the same template in 2 different ways; Once tied to a route url and once by using the render helper.
jsbin here