Develop Reference

Show Action via iron:router, template isn't passed data from a collection.findOne method

I can't get a the 'show' page of an instance of a model to display its data.
Here's the template that won't show its data:
<template name="priority">
<h1>Priority: {{title}}</h1>
</template>
It's very simple in and of itself, yet I can't get title to display. Iron:router does the job of directing us to this page with the following code:
Router.route('/priority/:_id', function(){
var priority = this.params._id;
this.render('priority', {
data: function(priority){
Meteor.call('showPriority', priority, function(error){
if (error) {
console.log("An error has occured: " + error);
}
})
}
})
}, {
name: 'priority.show'
});
The Meteor.method is very simple, it just queries for the variable priority:
'showPriority': function(priority) {
return Priorities.findOne({_id: priority});
}
The view which carries the href is here:
<template name="priorityList">
<ul class="table-view">
{{#each this}}
<li class="table-view-cell">
{{title}}
<span class="pull-right icon icon-edit"></span>
</li>
{{/each}}
</ul>
</template>
Note that this view shows a list of all priorities. When I inspect the href, all the paths are being dynamically generated with an _id:
<a href="/priority/yYihyZmZ2xkAso7i5">...
Oh, and I should mention, that I also tried to use the waitOn method, since I thought I might be loading the template before the data, but that didn't help either...
Router.configure({
...
waitOn: function(){
return Meteor.subscribe('priorities');
}
});
So much code, just to show what's going on!
What's the deal here? Why won't my "show" template give me any data?

Change you route to this.
Router.map(function () {
this.route('priority', {
path: '/priority/:_id',
waitOn: function(){
return Meteor.subscribe('priorities',this.params._id);
},
data: function(){
if(this.ready()){
return Priorities.findOne({_id: this.params._id});
}else{
this.render('loading') //if data not ready we render some loading template
}
}
});
});
You don't need to make a Meteor.call, for the find(); instead to everything on the data:function()
The above is just an example so you can get the idea, but it should work since you are expecting _id:priority and _id:this.params._id its the same.
Just be sure you have the autopublish package removed.
and have the subscriptions/publish in order.
Meteor.publish('Menu', function(){
return Priorities.find();
});

Multiple subscriptions in iron router

I have been working on an application using a comment function. That results in having to subscribe to both a collection which the comments are made on and the comments collection itself. Now it looks like this:
<template name="bookView">
{{> book}}
{{> comments}}
</template>
this.route('book', {
path: '/book/:_id',
template: 'bookView',
waitOn: function() { return Meteor.subscribe('book');},
action: function () {
if (this.ready()){
this.render();
}
else
this.render('loadingTemplate');
},
data: function() {return Books.findOne(this.params._id);}
});
But now I would like to load all comments belonging to that book also. Or should I handle the subscription of comments in Template.comments.rendered?

Yeah you have two ways:
Logic in Controller. You can subscribe with an array to multiple collections. This would be the way you go when you show all the comments instantly.
this.route('book', {
path: '/book/:_id',
template: 'bookView',
/* just subscribe to the book you really need, change your publications */
waitOn: function() {
return [Meteor.subscribe('book', this.params._id),
Meteor.subscribe('comments', this.params._id)];
},
data: function() {
return {
book : Books.findOne(this.params._id),
comments: Comments.find(this.params._id)}
}
});
If you dont want to show comments until they are requested by the user. You can follow another way:
You can set the bookId on buttonclick into a Session variable. Than you can define a Deps.autorun function which subscribes to the comments collection with the bookId provided in your Session variable. In your comments template you just have to do the normal collection request. If you need more hints about this way let me know.

Your waitOn function can wait for multiple subscriptions by returning an array of the subscription handles.

Seo routes with ember serializer

Im following the example emberjs guides
...
this.route('author', { path: '/author/:post_userName' });
...
App.PostsAuthorRoute = Ember.Route.extend({
model: function(params) {
return App.Post.find({userName : params.userName});
},
serialize:function(model) {
return { post_userName: model.get('userName')};
}
});
Then here is the link to
Author {{#linkTo 'posts.author' post }} {{post.userName }} {{/linkTo}}
The fun is when I click on the link I get a routing error
Error while loading route: TypeError {}
Uncaught TypeError: Object [Object Object] has no method 'slice'
But when I reload the page, the full data appears.
How can I solve the routing error, really I don't understand why I get the error and is solved on reload the page
Here is the jsbin of a similar case.
http://jsbin.com/aZIXaYo/31/edit

The problem is with the object you're passing to your link-to. You're doing this :
Author {{#linkTo 'posts.author' post }} {{post.userName }} {{/linkTo}}
which passes, a Post to the author route. Passing a model to link-to causes the model hook on the route to be skipped and the passed model is used instead. When you hit reload, the model hook is executed and the model for PostsAuthor route is set to be a collection of Post objects, and then things work as expected.
To do things The Ember Way (TM), you'd want to have an Author model that was related to your Post model. Then you'd have an AuthorRoute and AuthorController that needs a PostsController. In your link you'd pass post.author, and then use the setupController hook to prime the collection for the PostsController. Something like this:
App.Post = DS.Model.extend({
author : DS.belongsTo('post'),
title : DS.attr('string')
});
App.Author = DS.Model.extend({
name : DS.attr('string'),
userName : DS.attr('string')
});
App.AuthorRoute = DS.Route.extend({
model : function(){ // not called when the author is passed in to #link-to
return this.store.find('author',{userName : params.post_userName})
},
setupController : function(controller,model){
this._super(controller,model);
this.controllerFor('posts').set('content', this.store.find('post',{userName : model.userName}))
}
});
App.AuthorController = Ember.ObjectController.extend({
needs : ['posts']
});
App.PostsController = Ember.ArrayController.extend({
sortProperties : ['name']
});
Then the template :
Author {{#linkTo 'posts.author' post.author }} {{post.author.name }} {{/linkTo}}

Meteor Iron Router : Passing data between routes

How do I pass data between two different routes and templates?
I have a javascript file on the front end (client folder) that simply calls Router.go() passing in the post ID as one of my parameters.
Below are the three main culprits (I believe). I've removed most of the code to make it easier to read. I can change to the PostDetail page with no problems. I can also retrieve the PostId on the PostDetail page from the Router. My problem is, the database entry (POLL) that is retrieved does not get rendered on the template. Hence {{Question}} is always blank even though the database entry is being returned.
Let me know if I should post more information.
FrontEnd.js
Template.PostTiles.events({
// When a choice is selected
'click .pin' : function(event, template) {
Router.go('Post', {_PostId: this.PostId});
}
});
post-detail.html
<template name="PostDetail">
<h3>{{Question}}</p>
</template>
Shared.js
Router.map( function() {
this.route('Home', {
path: '/',
template: 'PostTiles',
data: {
// Here we can return DB data instead of attaching
// a helper method to the Template object
QuestionsList: function() {
return POLL.find().fetch();
}
}
});
this.route('Post', {
template: 'PostDetail',
path: '/Post/:_PostId',
data: function() {
return POLL.findOne(this.params._PostId);
},
renderTemplates: {
'disqus': {to: 'comments'}
}
});
});
----- Update -----
I think I've narrowed down the issue to simply being able to render only one Database entry, instead of a list of them using the {{#each SomeList}} syntax.

Looks like you found the answer / resolved this, but just in case, I think it's in your findOne statement:
data: function() {
return POLL.findOne(this.params._PostId);
},
should read:
data: function() {
return POLL.findOne({_id:this.params._PostId});
},
(assuming that POLL has your posts listed by _id.
Hope that helps.

Could you pass the info in the Session? the docs for that are here http://docs.meteor.com/#session. That's what I'm planning on doing.

Individual view from an item in an ArrayController

I have an ember.js model and controller setup like so:
//model
App.Order = Ember.Object.extend({
content: null,
create: function(data) {
this.set('content', data);
return this._super();
}
});
//orders controller
App.ordersController = Ember.ArrayController.create({
content: [],
init: function() {
var self = this;
var orders = [];
$.getJSON('js/data.json', function(data) {
data.forEach(function(item) {
var order = App.Order.create(item);
orders.push(order);
});
self.set('content', orders);
});
},
selectItem: function(data) {
alert(data);
}
});
With the following view:
{{#each App.ordersController}}
<div {{action selectItem target="App.ordersController"}}>{{order_number}}</div>
{{/each}}
Which prints out a list of orders with a click action that alerts the corresponding item. This works fine.
What I want to do is show a clicked item in a separate view, eventually with the goal of creating a floating dialogue with orders details shown. I'm new to ember and not sure how this should be implemented. I have a function selectItem which alert's a clicked order but I need to link this to a separate view and print the order details.
Should I store the selected item in a separate controller with a corresponding view and update this when selectItem is clicked? Or could I update a sperate view from the ordersController? Any advice is much appreciated.

When you use the router ember does the instantiation of your class for you. By specifing the "orders" route is looks for a template called orders and a controller called OrdersController if it can't find one it'll generate one for you. (I've omitted the controller for clearity). To load your model from a json source you could have a look at ember-data.
here is a jsfiddle so you can fiddle with it a bit.
You should definitely have a look here these are guides for ember that really help you on the way. The documentation is getting better and better. :)
JS:
window.App = App = Em.Application.create();
//model
App.Order = Ember.Object.extend({
order_number: null,
});
//we create 2 routes one for all the order and one per specific order
App.Router.map(function(){
this.resource('orders', { path: "/" });
this.resource("order", { path: "/:order_id" });
});
//the route supplies the model and handles the event to transition to a new route.
App.OrdersRoute = Em.Route.extend({
events: {
selectItem: function (orderId) {
//select the order by the "orderId" you want as a model for your new view.
this.transitionTo("order", order);
}
},
model: function(){
return content; //an array containing the orders;
}
});
//supplies the model for the "order" route by selecting one acording to the params;
App.OrderRoute = Em.Route.extend({
model: function(params){
return order; //select an object from the array according to the params
},
});
HBS:
<script type="text/x-handlebars" data-template-name="orders">
{{#each controller}}
<!-- this calls the event handler "selectItem" on the ordersroute -->
<div {{action "selectItem" order_number}}>{{order_number}}</div>
{{/each}}
<!-- this is handled by "App.OrderRoute" -->
<a href="#/3"/>with a direct link</a>
</script>
<script type="text/x-handlebars" data-template-name="order">
{{content.order_number}}
{{#linkTo "orders"}}Back to orders{{/linkTo}}
</script>