I'm new to meteor and coding in general. I need to change this to flow router so that I can get the comments to work(I guess). Does anyone want to lend a hand?
Router.map(function () {
this.route('post/:id', {
waitOn: function() {
return [
Meteor.subscribe('post', this.params.id),
Meteor.subscribe('postComments', this.params.id)
]
},
data: function() {
return {
post: Posts.findOne({_id: this.params.id}),
comments: Comments.find({postId: this.params.id})
}
}
});
});
And btw I'm using flow router on everything in the app so I guess iron conflicts with it which gives me this:
Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/recipe-book."
Related
Iron-router is preventing my template from rendering a new page because it seems to believe it is already there.
The routes that I am dealing with are these:
Router.route('/', {
name: 'landingpage',
template: 'landingpage',
onBeforeAction: function() {
this.next();
}
});
Router.route('/chapter/:pathSlug/:chapterSlug', {
name: 'chaptershow',
template: 'chaptershow',
//waitOn: function() {
//return [Meteor.subscribe('users'),
//Meteor.subscribe('ChapterCollection')];
//},
onBeforeAction: function() {
Session.set('currentRoute', 'chapter');
this.next();
}
});
Let's say I have two chapters I want to display:
/chapter/voyage/somestories
/chapter/voyage/someotherstories
From the console I can easily go from the landingpage to either of the voyage pages or vice versa with
Router.go('landingpage');
Router.go('/chapter/voyage/somestories');
However, if I am on /chapter/voyage/somestories and try to go to /chapter/voyage/someotherstories using either
Router.go('/chapter/voyage/someotherstories');
Router.go('chaptershow', {pathSlug: 'voyage', chapterSlug: 'someotherstories'});
the URL in the location bar changes to /chapter/voyage/someotherstories but the new context doesn't load.
How do I get my new chapter to render?
I upgraded to Meteor 1.0, installed the latest iron-router package, tried to run my app and got this nice warning in my console log:
Route dispatch never rendered. Did you forget to call this.next() in
an onBeforeAction?
So I tried to modify my routes according to the new version.
this.route('gamePage', {
path: '/game/:slug/',
onBeforeAction: [function() {
this.subscribe('singlePlayer', this.params.slug).wait();
var singlePlayer = this.data();
if (singlePlayer) {
if (singlePlayer.upgrade) {
this.subscribe('upgrades', this.params.slug).wait();
this.next();
}
this.next();
}
this.next();
}],
data: function() {
return Games.findOne({slug: this.params.slug});
},
waitOn: function() { return [Meteor.subscribe('singleGame', this.params.slug)]}
});
How can I fix this?
Any help would be greatly appreciated.
Try removing all the .wait()s and removing the array around your onBefore function.
With the new API this.next() replaces .wait().
I'd like to nest resources in Ember, but to be able to access them with a short URL.
For example: mysite.com/admin will open the route: /routes/profiles/settings/admin
Is it possible to do something like that using Ember?
I'm currently using Ember 1.7 with Ember App Kit.
I tried the following but it doesn't work:
var Router = Ember.Router.extend();
Router.map(function () {
this.resource('profile', function () {
this.resource('profile.settings', { path: '/settings' }, function () {
this.resource('profile.settings.admin', { path: '/admin' });
);
});
Thanks.
Your code doesn't work because your inner most resource is inheriting the /profile path from the outer most resource and /settings from the middle resource. If you want it to be just plain /admin, you'd have to do something like this:
this.resource('profile', { path: '' }, function() {
this.resource('profile.settings', { path: '' }, function() {
this.resource('profile.settings.admin', { path: '/admin' });
});
});
However, this is going to get pretty hairy when you have more routes that each want top-level paths. You might find it easier to just declare a admin route at the top level, then redirect using the redirect hook in the route.
I am trying to add an WatchList feature in the existing code discourse ember rails application
I have addded the following code
Discourse.Route.buildRoutes(function() {
var router = this;
this.resource('watchLists', { path: '/watch_lists' }, function() {
this.resource('watchList', {path: ':watch_list_id'});
});
});
In the ember Controller
Discourse.WatchListsController = Discourse.ObjectController.extend({});
In the ember model
Discourse.WatchList = Discourse.Model.extend({});
Discourse.WatchList.reopenClass({
find: function() {
jQuery.getJSON("watch_lists").then(function(json) {
var watch_lists = json.watch_lists.map(function(attrs) {
return Discourse.WatchList.create(attrs);
});
});
In the ember view js
Discourse.WatchListsView = Ember.View.extend({});
In ember route js
Discourse.WatchListsRoute = Discourse.Route.extend({
model: function() {
return Discourse.WatchList.find();
}
});
When i renderring the handlebars template I am getting an WatchListsController object withot the data we have got from the ajax.
Can any body point out where i am doing wrong.
I see two possible problems.
First, you probably want WatchListsController to extend Discourse.ArrayController, not Discourse.ObjectController.
Second your reopen block is not valid JavaScript in the example code that you posted. I count four { but only two }. You probably want something kind of like this:
Discourse.WatchList.reopenClass({
find: function() {
return jQuery.getJSON("watch_lists").then(function(json) {
return json.watch_lists.map(function(attrs) {
return Discourse.WatchList.create(attrs);
}
});
}
});
When you want to use classes you created in Em.Application.create() in your router you need to specify the router outside of the application.create. But because the application is automatically initialized the router doesn't route to the / route.
You used to be able to defer the initialization by adding autoinit: false to the application.create. Now you are supposed to use App.deferReadiness() and App.advanceReadiness(). However this doesn't appear to work.
And I can't seem to escape the feeling that you are "supposed" to do it differently.
I added the minimal code to show the problem below. There is also a jsfiddle here
EDIT:
Apparently there is a new router in ember I kinda sorta overlooked that. I've changed the code to the new router, but guess what it still doesn't work :P
window.App = App = Em.Application.create({
ApplicationController: Em.Controller.extend({}),
ApplicationView: Em.View.extend({
template: Em.Handlebars.compile('{{outlet}}'),
}),
ExtendedPatientController: Em.ObjectController.extend({}),
ExtendedPatientView: Em.View.extend({
classNames: ['patient-view', 'extended'],
template: Em.Handlebars.compile('{{name}}')
}),
Patient: Em.Object.extend({
name: undefined,
}),
});
App.Router.map(function (match) {
match('/').to('application', function (match) {
match('/').to('extendedPatient');
})
});
App.deferReadiness();
App.ExtendedPatientRoute = Em.Route.extend({
setupController: function (controller) {
controller.set('', App.Patient.create({
name: "Bert"
}));
},
renderTemplates: function () {
this.render('extendedPatient', {
into: 'application'
});
}
});
App.advanceReadiness();
You're actually doing a lot more work than you need to here.
Here's all the code that you need to make your example work.
Template:
<script type="text/x-handlebars" data-template-name="index">
<div class="patient-view extended">
<p>Name: {{name}}</p>
</div>
</script>
App:
window.App = Em.Application.create();
App.Patient = Em.Object.extend({
name: null
});
App.IndexRoute = Em.Route.extend({
model: function() {
return App.Patient.create({
name: "Bert"
});
}
});
The working fiddle is at: http://jsfiddle.net/NXA2S/23/
Let me explain it a bit:
When you go to /, you are entering the automatic index route. All you need to do to show something on the screen for that route is to implement an index template. The easiest way to do that when you're getting up and running is to put your template in your index.html. Later, you will probably want to use build tools (see my answer here for more information).
You can control what model is displayed in a route's template by overriding the model hook in its route handler. In the case of index, the route handler is App.IndexRoute. In this case, the model is a brand new App.Patient.
You will probably want to implement controllers and events. You can learn more about the router on the Ember.js website
So the new router does solve this problem and does feel a bit shinier.
I finaly found out how to do this basic example this is what happens in the router:
App.Router.map(function (match) {
match('/').to('extendedPatient');
});
This what needs to happen in the views:
ExtendedPatientView: Em.View.extend({
classNames: ['patient-view', 'extended'],
//You need to specify the defaultTemplate because you extend the view class
//instead on initializing it.
defaultTemplate: Em.Handlebars.compile('{{name}}')
}),
You do not have to defer the readiness in the app the new router fixes that.
And in the route you do not need to specify the renderTemplates so the router now looks like:
App.ExtendedPatientRoute = Em.Route.extend({
setupController: function (controller) {
controller.set('content', App.Patient.create({
name: "Bert"
}));
},
});
http://jsfiddle.net/NXA2S/28/