I'm moving over from Backbone to Ember, and to start to get the swing of things I'm trying to make a Blog App.
I get the error --
Uncaught Error: Assertion Failed: The attempt to link-to route 'posts' failed. The router did not find 'posts' in its possible routes: 'loading', 'error', 'index', 'application'
This is what I have so far --
Blog.Router.map = function() {
this.resource('posts');
}
Blog.PostsRoute = Ember.Route.extend({
model: function() {
this.get('store').findAll('post')
}
})
Blog.Post = DS.Model.extend({
name: DS.attr('string')
});
map is a function, not a property you set.
Blog.Router.map( function() {
this.resource('posts');
});
Related
i face this error when saving data to api
Uncaught Error: Assertion Failed: Cannot delegate set('firstName', a) to the 'content' property of object proxy <>: its 'content' is undefined
below is my code
import Ember from 'ember';
export default Ember.ObjectController.extend({
isValid: Ember.computed(
'email',
'firstName',
'lastName',
'twitter',
function() {
return !Ember.isEmpty(this.get('email')) &&
!Ember.isEmpty(this.get('firstName')) &&
!Ember.isEmpty(this.get('lastName')) &&
!Ember.isEmpty(this.get('twitter'));
}
),
actions:{
save: function() {
if (this.get('isValid')) {
var _this = this;
this.get('model').save().then(function(friend) {
_this.transitionToRoute('friends.show', friend);
});
} else {
this.set('errorMessage', 'You have to fill all the fields');
}
},
cancel: function() {
this.transitionToRoute('friends');
}
}
});
Don't use ObjectController. Use simply Ember.Controller.extend.
I see this on the ember-cli-101 book. I encountered the same issue myself. It's likely that you are not properly setting the model attribute in your route. Based on the book, the error either occurs in the edit or new route.
if your router.js looks like this:
...
Router.map(function() {
this.resource('friends', function() {
this.route('new');
this.route('show', { path: ':friend_id' });
this.route('edit', { path: ':friend_id/edit' });
});
});
...
the friends/index route needs to set the model attribute:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('friend');
},
});
and the friends/new route needs to set the model in a different way:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.createRecord('friend');
},
});
For anyone not familiar with the book (mentioned above) the question is from code that is in the book, which is why I referenced it. In most cases, if you get this issue it is likely because you forgot to or did not set up the model attribute correctly in the appropriate route.
I'm using Ember 1.4 with EmberData beta 7. My application has the routes and models shown below:
App.Router.map(function () {
this.resource('strats', {path: "/"}, function() {
this.route('strat', {path: "/strat/:strat_id"});
});
});
App.StratsStratRoute = Ember.Route.extend({
model: function(params) {
return this.store.find(params.strat_id);
}
});
var attr = DS.attr;
var belongsTo = DS.belongsTo;
var hasMany = DS.hasMany;
App.StratLeg = DS.Model.extend({
legName: attr(),
quantity: attr(),
strat: belongsTo('strat')
});
App.Strat = DS.Model.extend({
stratName: attr(),
stratLegs: hasMany('stratLeg', {async:true})
});
I can transition into the strats.strat route via link-to fine. So for example, if I transition into the strats.strat route via link-to for id="dd-put", URL displays
http://localhost:8000/em.yaws#/strat/dd-put
and everything works. But now if I hit the refresh button, or type in that same URL after first transitioning to a different route, then I get this error message on the browser console and nothing displays:
Error while loading route: Error: No model was found for 'dd-put'
at new Error (native)
at Error.Ember.Error (http://localhost:8000/js/scripts/ember-1.4.0.js:844:19)
at Ember.Object.extend.modelFor (http://localhost:8000/js/scripts/ember-data-beta7.js:9762:33)
at Ember.Object.extend.findAll (http://localhost:8000/js/scripts/ember-data-beta7.js:9364:21)
at Ember.Object.extend.find (http://localhost:8000/js/scripts/ember-data-beta7.js:9046:23)
at App.StratsStratRoute.Ember.Route.extend.model (http://localhost:8000/js/app/ed.js:47:27)
at superWrapper [as model] (http://localhost:8000/js/scripts/ember-1.4.0.js:1239:16)
at Ember.Route.Ember.Object.extend.deserialize (http://localhost:8000/js/scripts/ember-1.4.0.js:35901:19)
at http://localhost:8000/js/scripts/ember-1.4.0.js:32521:57
at http://localhost:8000/js/scripts/ember-1.4.0.js:33000:19
Anyone know what's causing this?
I've followed this example http://emberjs.com/guides/controllers/dependencies-between-controllers/ to implement a nested resource for my app but continue to receive route and type errors.
I've created my route as follows:
App.Router.map(function () {
this.resource('logs', {path: '/'}, function(){
this.resource('log', {path:'/logs/:log_id'}, function(){
this.resource('triggers');
});
});
});
My controller:
App.TriggersController = Ember.ArrayController.extend({
needs:"log"
});
Model:
App.Log = DS.Model.extend({
name: DS.attr('string'),
type: DS.attr('string'),
messages: DS.attr('string'),
triggers: DS.hasMany(App.Trigger, {async:true})
});
Child Model:
App.Trigger = DS.Model.extend({
name: DS.attr('string'),
pattern: DS.attr('string'),
isEnabled: DS.attr('boolean'),
colour: DS.attr('string'),
highlightText: DS.attr('boolean'),
invertContrast: DS.attr('boolean')
});
JSFiddle link : http://jsfiddle.net/WZp9T/11/
Click on one of the links and you should see the error in console.
("Error while loading route: TypeError {}" and "Uncaught TypeError: Cannot read property 'typeKey' of undefined" as well as a deprecation warning)
Basically, what I'm trying to achieve is:
Logs -> Log -> Log Triggers -> Trigger
Each context should remain on screen, where exactly am I going wrong?
EDIT: It seems to be a problem with this:
App.LogIndexRoute = Ember.Route.extend({
model: function (params) {
return this.store.find(params.log_id);
}
});
If I remove that piece of code I no longer receive my errors.
You need to tell the store which kind of object you want to look up. Right now you're just passing it an ID. This is probably what you're looking for:
App.LogIndexRoute = Ember.Route.extend({
model: function (params) {
return this.store.find('log', params.log_id);
}
});
I'm trying to start to build a admin system that will run on a /admin/ prefix.
Here is my routes file
App.Router.reopen
location: 'history'
rootURL: '/admin'
App.IndexRoute = Ember.Route.extend
setupController: (controller, model) ->
#controllerFor('application').set('currentRoute', 'home')
When I go to /admin I get the following error:
Uncaught Error: No route matched the URL '/admin'
I'm just starting with emberjs, and my code is based on this serie
Ember version: v1.0.0-pre.4
Ember-data current api revision:: 11
In old-router the 'rootURL' property would have been ignored when resolving routes. In the latest version of ember, rootURL only seems to be used when constructing links. Not sure if this is a bug or oversight. As a workaround, try this instead:
App.Router.map(function() {
this.resource("admin", { path: "/admin" }, function() {
this.route("other");
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('admin');
}
});
When talking about routing in emberjs, it depends which version you are using. There was a big API change between 1.0pre2 and 1.0pre3. The docu on www.emberjs.com is already up-to-date for the new API and and easy to understand.
Below a really small example that shows
IndexRoute that automatically redirects to the overview of all members at '/members'.
Dynamic routing based on an ID
Serialization/Deserialization in case that the parameter is not 'id' but something else. In the example below, it is 'refId' (stands for reference ID).
Well, the examle does not really show more than the official documentation. but add-on information is always nice.
So, hope this helps. cheers.
App.Router.map(function() {
this.resource("members", { path: '/members' });
this.resource("member", { path: "/members/:refId" }, function() {
this.route("delete");
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('members');
}
});
App.MembersRoute = Ember.Route.extend({
model: function() {
return App.Member.findAll();
}
});
App.MemberRoute = Ember.Route.extend({
model: function(params) {
return App.Member.find(params.refId);
},
// overwrite default serializer (defaults to 'id', member has 'refId')
serialize: function(model) {
return { refId: model.refId };
}
});
I am following Router based application structure based on http://emberjs.com/guides/outlets/.
I am able to follow, and make it work. But Having issue while loading content when page is showing post (e.g. /#/posts/2), I suspect that it is because, that particular Post is not loaded.
What is way out of it? Isn't it suppose to work out of the box.
Fiddle example: http://jsfiddle.net/nachiket/h5Hkm/
App = Ember.Application.create({});
//MODEL
App.Summary = DS.Model.extend({
content: DS.attr('string')
});
App.Post = DS.Model.extend({
title: DS.attr('string'),
summary: DS.hasMany(App.Summary, {embedded: true})
});
App.Post.FIXTURES = [
{id:1, title: 'My first post', summary: [{id:1, content: 'This is summary1'}]},
{id:2, title: 'Another post' , summary: [{id:2, content: 'This is summary2'}]},
{id:3, title: 'Yet another post' , summary: [{id:3, content: 'This is summary3'}]}
];
//STORE
App.store = DS.Store.create({
revision: 4,
adapter: DS.fixtureAdapter
});
//ROUTER
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
redirectsTo: 'posts'
}),
posts: Ember.Route.extend({
route: '/posts',
showPost: Ember.Route.transitionTo('post'),
connectOutlets: function(router){
router.get('applicationController').
connectOutlet('posts',App.Post.find());
}
}),
post: Ember.Route.extend({
route: '/posts/:post_id',
goBack: Ember.Route.transitionTo('posts'),
connectOutlets: function(router, post) {
router.get('applicationController').connectOutlet('post', post);
}
})
})
});
//CONTROLLERS - VIEWS
App.ApplicationController = Ember.Controller.extend({});
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.PostsController = Ember.ArrayController.extend({
});
App.PostsView = Ember.View.extend({
templateName: 'posts'
});
App.PostController = Ember.ObjectController.extend({
});
App.PostView = Ember.View.extend({
templateName: 'post'
});
App.initialize();
Direct output: http://fiddle.jshell.net/nachiket/h5Hkm/show/light/
Works: http://fiddle.jshell.net/nachiket/h5Hkm/show/light/#/posts
Doesn't Work: http://fiddle.jshell.net/nachiket/h5Hkm/show/light/#/posts/1
Ember routing is passing the string "1" instead of the number 1 to the find method to resolve the post. The string "1" doesn't match any fixtures. Changing your fixtures (for test purposes) to have string ids should work.
http://jsfiddle.net/h5Hkm/7/show/light/#/posts/1
Adding a deserializer to your "post" route should do the trick.
I'd recommend reading (at least the "Serializing and Deserializing States" section) http://trek.github.com/.
Let me know if you have trouble getting it to work and I'll create a fiddle.