I have a Router.map defined to my application. I'm working with EmberJS AppKit architecture. https://github.com/stefanpenner/ember-app-kit
I'd like to access to my page "profile" using the following path:
http://localhost:8000/#/profile
But, the name of my route differ to this path, because it's call user-profile, so I did this:
router.js
var Router = Ember.Router.extend();
Router.map(function () {
this.resource('user-profile', { path: 'profile'}, function() {
//Some other things...
});
});
export default Router;
user-profile.js
export default Ember.Route.extend({
model: function () {
return this.store.find('user-profile');
}
});
When I launch my application, Ember is telling me that profile route doesn't exist, even though I defined the path:
Uncaught Error: Assertion Failed: Error: Assertion Failed: The URL '/profile' did not match any routes in your application
Do you know what's wrong with my code at this point?
Thanks
I dont use ember appkit but perhaps try with underscore, ie 'user_profile' and rename your file too. Just a shot in the dark.
I would have to guess it is the way that you are designing your router and the namespace.
Typically a barebones Ember app requires:
window.App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true
});
App.Router.map(function () {
this.resource('user-profile', { path: 'profile'}, function() {
//Some other things...
});
In your example your router is not in the App namespace, or whatever your root object is named (It doesn't have to be 'App'). I would give this a try or maybe post more code if there are other factors I do not see here.
Also, typically you would name your route userProfile. While i dont think the dasherized name is a problem, it doesn't follow Ember naming conventions.
Hope this helps.
Related
I was unable to find any current answers for this question.
I am building my latest project in Ember and while I am able to access the different routes directly and with refreshes locally, as soon as I build for production and host the site, this no longer works. I believe the slug portions of my routers are correct so not sure what I need to update.
Note: I am using Ember CLI.
Router.js
const Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('reviews', function() {
this.route('index', {path: '/'});
this.route('review', {path: '/:review_id'});
});
this.route('movies');
this.route('about');
this.route("error", { path: "*path"});
});
Review Model
export default Ember.Route.extend({
model(params) {
const id = parseInt(params.review_id);
const movies = this.get('movies');
return movies.getMovieById(id);
},
movies: Ember.inject.service()
});
If I try to directly access or refresh /about, /reviews, /movies, or /reviews/:review_id I am given a 404. Even though the about route doesn't have a model to retrieve any data. It's simply loading a template. The only route I can refresh on is the very index page of the site.
I found this link here which instructed how to update your htaccess file to redirect requests to Ember's index file. This looks to have solved my problem:
http://discuss.emberjs.com/t/apache-rewrite-rule-for-html5-browser-history-url-bookmarkability/1013
As the title suggests I'm trying to transitionTo a child path from a action. The problem is that Ember says that it can't find any paths with that name. Looking at the Ember docs I've no idea what I'm doing wrong here. I'm hoping someone here might have the expertise to help me out.
Ember Error:
Uncaught Error: Assertion Failed: The route post.comments was not found
Application route definition:
this.resource('post', { path: 'post/:post_id' }, function () {
this.resource('comments');
});
The transitionTo in the action:
route.transitionTo('post.comments', post_id);
Route post.comments doesn't exist because you define comments as resource instead of route. I guess this should work:
this.resource('post', { path: 'post/:post_id' }, function () {
this.route('comments');
});
route.transitionTo('post.comments', post_id);
However if you really need to declare comments as resource, use:
route.transitionTo('comments', post_id);
Just converted my app to ember-cli, but I don't know how to use Ember.Application.register any more because register doesn't seem to be available when Application is started with extend rather than create.
import Ember from 'ember';
import App from 'myapp/app';
var AdminMyController = Ember.ObjectController.extend({
});
// THROWS ERROR HERE BECAUSE register isn't, uh...registered?
App.register('controller:adminMyController', AdminMyController, { singleton: false });
export default AdminMyController;
Previously, because App was a global, I could register this right in the same class.
Am I going to have to move all the register calls to an initializer so I can get access to the app instance?
I belive an initializer would do this for you. You'll need to create an initializers folder in your app directory (same level as controllers, templates, etc). This file should go there.
import Ember from 'ember';
var AdminMyController = Ember.ObjectController.extend({
...
});
export default {
name: 'adminMyController',
initialize: function (container, application) {
container.register('controller:adminMyController', AdminMyController, {singleton: false});
}
};
I've created some routes using ember generate route {my_route_name} and it creates a js file under routes and a hbs file under templates
Now I want to define these routes like
App.Router.map(function() {
this.resource('posts');
this.resource('post', { path: '/post/:post_id' });
});
But where do I do that in ember-cli?
I've tried adding it in the app.js file right under this code
var App = Ember.Application.extend({
modulePrefix: 'front', // TODO: loaded via config
Resolver: Resolver
});
But that gives me an error: Uncaught TypeError: Cannot read property 'map' of undefined
So I am a little confused as to where to actually define all my routes?
They should be defined in the app/router.js file.
Since you used ember generate route it's likely that a route is already defined there for you, you'll just need to update it.
I'm building a backbone.js + require.js application and I have run into the following issue.To structure my application I have an App.js file which as the following contents:
define(function(require) {
'use strict';
var _ = require('underscore'),
Backbone = require('backbone'),
Router = require('router'),
ModuleManager= require('moduleManager');
var App = function App() {
var base = {
router: new Router(),
moduleManager: new ModuleManager(),
start: function start(){
Backbone.history.start({pushState: true});
this.router.navigate('home', {trigger: true});
}
};
return _.extend(
base,
Backbone.events
);
};
return App;
});
The application is started with window.myApp = new App();, then myApp.start();.
The contents of router.js are as follows :
define(function(require) {
'use strict';
var _ = require('underscore'),
Backbone = require('backbone');
var Router = Backbone.Router.extend({
routes: {'home': 'home'},
home: function home() {
// MY ISSUE IS HERE
App.moduleManager.add('moduleName');
}
});
return Router;
});
The moduleManager is a utility function/object for :
Adding application modules via App.moduleManager.add('module') by requiring require.js files (backbone views + collections),
Doing some checks (e.g. ensuring the module doesn't already exist),
Centrally storing modules in App.moduleManager.modules
Everything is working fine except for the following point :
How can I call App.moduleManager from within App.router.home or any other route (App.router.xyz) ?
Within App.router.home, this can't refer to App (?)
Within router.js, I can't call App = require('app') because I would be making a circular dependency between App.js and Router.js
I'm not sure if I have a global application structure problem or if there is just a simple language construct which can work around this problem. Thanks for any help you can provide.
You could pass the object you need in the router's constructor.
But I would suggest using events. In the route, trigger an event, then listen for that event in the app. This leaves the router to do a single job, responding to route changes from the browser (back/forward clicks).
In router:
home: function() {
Backbone.trigger('home:show');
}
In app:
start: function(){
Backbone.history.start({pushState: true});
Backbone.on('home:show', this.showHome, this);
},
showHome: function(){
this.router.navigate('home', {trigger: false}); // just update, dont trigger route
this.moduleManager.add('moduleName');
}
Now if you want to change what the app is showing from your code, you can just trigger this event, instead of calling navigate on the router.
Some other code, maybe a menu view:
homeClicked: function(){
Backbone.trigger('home:show');
}
This would show your home view, and also update the history.