Error while loading route: undefined while using EmberJS with Firebase (emberFire) - ember.js

I recreated the TodoMVC using EmberJS and after I was finished, I tried to change the ApplicationAdapter to FirebaseAdapter. But then the application stopped working and I am getting this error:
Error while loading route: undefined
Here are the version I am using
Ember : 1.5.0
Ember Data : 1.0.0-beta.7+canary.b45e23ba
Handlebars : 1.3.0
jQuery : 2.1.0
You can check out the code at github
but here are some of the file contents.
With this code, it works
Todos.ApplicationAdapter = DS.FixtureAdapter.extend();
But when I change it to this, it stops working and I get the error:
Todos.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: new Firebase('https://glaring-fire-8506.firebaseio.com')
});
I have the TodosController and TodoController, and this is my router file
Todos.Router.map(function () {
this.resource('todos', { path: '/' }, function () {
this.route('active');
this.route('completed');
});
});
Todos.TodosRoute = Ember.Route.extend({
model: function () {
return this.store.find('todo');
}
});
Todos.TodosIndexRoute = Ember.Route.extend({
model: function () {
return this.modelFor('todos');
},
renderTemplate: function (controller) {
this.render('todos/index', {
controller: controller
});
}
});
Todos.TodosActiveRoute = Todos.TodosIndexRoute.extend({
model: function () {
return this.store.filter('todo', function (todo) {
return !todo.get('isCompleted');
});
}
});
Todos.TodosCompletedRoute = Todos.TodosIndexRoute.extend({
model: function () {
return this.store.filter('todo', function (todo) {
return todo.get('isCompleted');
});
}
});
EDIT: when I added the todos JSON object to Firebase, it's working as it should. But I would really want to understand the problem.

The problem was with the emberFire not handing empty / non-existent collections. This has now been fixed in the emberFire repo.
Github issue: https://github.com/firebase/emberFire/issues/39

Related

I am getting Assertion Failed: You must use Ember.set() when Navigate To Route using Href

I am getting the error below when i navigate from my index page to my detail page detail/3.
This works fine when I type detail/3 URL. I am using breeze with ember js
Error: Assertion Failed: You must use Ember.set() to access this property (of [object Object])
App.IndexRoute = Ember.Route.extend({
model: function () {
return EntityQuery.from('Property').using(manager).execute().then(function (data) {
return data.results;
}).fail(queryFailed);
}
});
App.Router.map(function () {
this.route('add');
this.route('detail', {path:'/detail/:detail_id'});
});
App.DetailRoute = Ember.Route.extend({
model: function (params) {
return EntityQuery.from('Property').where("PROPERTY_ID", "==", Number(params.detail_id)).expand('RENTs').using(manager).execute().then(function (data) {
return data.results[0];
}).fail(function (error) {
alert(error);
});
},
serialize: function (model) {
return { detail_id: model.pROPERTY_ID };
}
});
Thanks in advance
Sadly there is no Breeze "model library adapter" for Ember at this time. I hear tell of people who have married Breeze to Ember. You might search for that topic. It's on our wish list but not enough time yet to get it done ourselves.

EmberJs routing

I am trying to create EmberJs / RequireJs application and ran into a problem. According to examples, I defined my app.js like this:
(function () {
define(['../app/routing'], function (routing) {
return {
Router: routing,
LOG_TRANSITIONS: true
};
});
}());
, routing.js as:
(function (root) {
define(["ember"], function (Ember) {
var router = Ember.Router.extend({
todosRoute: Ember.Route.extend({
viewName: 'todos',
model: function(){
return this.todos.find('todos');
}
})
});
return router;
});
}(this));
and main.js:
require(['app', 'ember'], function(app, Ember){
var app_name = config.app_name || "app";
root[app_name] = app = Ember.Application.create(app);
The problem I have is that no matter how I define my routes, I cannot get them to work, emberJs also reports, that such routes do not exist.
How can I define routes and pass them to Application.create(obj) as argument object? If possible, I would still like to keep them in separate file.
Please note, that routing.js should be executed before main.js, therefore App object is not available like it is suggested in tutorials
js/app.js
App = Ember.Application.create();
App.Router.map(function() {
this.route('index', {
path: '/'
});
this.route('about');
});
App.IndexRoute = Ember.Route.extend({
//
});
I know you'll want to pull these all out into different files, but have you been able to make things work in a simple environment?
As far as the Require JS stuff... I don't know much about that - but there seems to be a thread here: Ember.js and RequireJS that gets to the bottom of it.
Make your router.js file look like this:
(function (W) {
'use strict';
define([
'ember'
], function (Ember) {
var Router;
Router = Ember.Router.extend();
Router.map(function () {
var _this = this;
_this.route('index', {path: '/'});
_this.route('todos', {path : '/todos/'});
});
return Router;
});
})(window);
For individual route, add a new file.
(function (W) {
'use strict';
define([
'ember',
'models/todosModel'
], function (Ember, TodosModel) {
var TodosRoute;
TodosRoute = Ember.Route.extend({
model: function () {
return TodosModel;
}
});
return TodosRoute;
});
})(window);
Add the individual routes to object returned by your app.js.

How to define a nested route to render when hitting the parent in Ember

I have a blog route, and a blog-post route.
Router:
App.Router.map(function () {
this.resource('blog', function () {
this.route('post', {path: ':id/:title'});
});
});
Routes:
App.BlogRoute = Ember.Route.extend({
model: function () {
return this.store.find('BlogPost');
}
});
App.BlogPostRoute = Ember.Route.extend({
model: function (params) {
return this.store.findById('BlogPost', params.id);
},
serialize: function (model, params) {
return {
id: model.get('id'),
title: Ember.String.dasherize(model.get('title'))
}
}
});
In my Handlebars template for the parent blog route I have an {{outlet}} that works fine when I click one of the {{#link-to}}s.
What I want to do is render by default the most recent (highest ID) blog post when a user goes to the /blog route.
I found this question and tried this as a result, to no avail:
App.BlogIndexRoute = Ember.Route.extend({
redirect: function () {
var latest = 3;
this.transitionTo('blog.post', {id: latest});
}
});
(latest is just a placeholder for this.model.pop() or whatever it needs to be.)
I just can't figure out how exactly to load the sub route with the data from the model.
You can fetch the model for any resource/route that has already been fetched (aka parent resources) using modelFor
App.BlogIndexRoute = Ember.Route.extend({
redirect: function () {
var blogs = this.modelFor('blog');
if(blogs.get('length')){
this.transitionTo('blog.post', blogs.get('firstObject')); // or blogs.findBy('id', 123)
}
}
});

Multiple models to Ember route

I have a list of printers
GradingX.PrintersRoute = Ember.Route.extend({
model: function () {
var printerList = Em.A();
//Ember.
$.getJSON("http://localhost/printers").then(function (data) {
data.forEach(function (item) {
printerList.addObject(item);
}), function () {
alert("$.getJSON failed!");
};
});
return printerList;
},
});
That I'm trying to access from my header
GradingX.HeaderRoute = Ember.Route.extend({
model: function () {
//console.log("test in header model route");
//return Ember.Object.create({
return Ember.RSVP.hash({
printers: What Goes Here?,
otherObjects: More Stuff Here
});
},
});
I'm trying to follow the answer here https://stackoverflow.com/a/20523510/697827, but since I'm not accessing through Ember-Data I don't think this.store.find('printers') is going to get me what I need.
I'm missing something. Please help!
RSVP.hash expects an object with keys and promises as values. So I think that the following could work:
GradingX.HeaderRoute = Ember.Route.extend({
model: function () {
return Ember.RSVP.hash({
printers: $.getJSON("http://localhost/printers"),
otherObjects: $.getJSON("http://localhost/???")
});
},
});
In the referenced answer is used this.store.find, which also returns a promise, but it's resolved with a DS.RecordArray (an array like object provided by ember data). So what matters for RSVP.hash are promises.

Ember and Yeoman error on edit controller

Following this post, on creating an workflow with Yeoman and Ember, when I hit the
/#/story/new url I get this error:
Error while loading route: Getbookmarks.StoryEditRoute<.model#http://localhost:9000/scripts/combined-scripts.js:117
superWrapper#http://localhost:9000/bower_components/ember/ember.js:1230
getModel#http://localhost:9000/bower_components/ember/ember.js:33281
model#http://localhost:9000/bower_components/ember/ember.js:33209
invokeCallback#http://localhost:9000/bower_components/ember/ember.js:9427
publish#http://localhost:9000/bower_components/ember/ember.js:9097
publishFulfillment#http://localhost:9000/bower_components/ember/ember.js:9517
DeferredActionQueues.prototype.flush#http://localhost:9000/bower_components/ember/ember.js:5650
Backburner.prototype.end#http://localhost:9000/bower_components/ember/ember.js:5741
Backburner.prototype.run#http://localhost:9000/bower_components/ember/ember.js:5780
Ember.run#http://localhost:9000/bower_components/ember/ember.js:6181
runInitialize#http://localhost:9000/bower_components/ember/ember.js:38453
jQuery.Callbacks/fire#http://localhost:9000/bower_components/jquery/jquery.js:2913
jQuery.Callbacks/self.fireWith#http://localhost:9000/bower_components/jquery/jquery.js:3025
.ready#http://localhost:9000/bower_components/jquery/jquery.js:398
completed#http://localhost:9000/bower_components/jquery/jquery.js:93
http://localhost:9000/bower_components/ember-data/ember-data.js
Line 3285
The detail of the error is:
error(error=TypeError: this.modelFor(...) is undefined
return this.get('store').find('story', this.modelFor('story').id);
, transition=Object { router={...}, promise=Promise, data={...}, more...}, originRoute=<Getbookmarks.StoryEditRoute:ember265> { routeName="story_edit", router=<Getbookmarks.Router:ember266>, store=<Getbookmarks.Store:ember267>, more...})ember.js (line 33949)
triggerEvent(handlerInfos=[Object { isDynamic=false, name="application", handler=<Getbookmarks.ApplicationRoute:ember268>, more...}, Object { isDynamic=false, name="story_edit", handler=<Getbookmarks.StoryEditRoute:ember265>}], ignoreFailure=true, args=[
TypeError: this.modelFor(...) is undefined
I don't have idea why I getting this. I've followed the tutyorial and I haven't skipped anything. My concerns is that the version of the tutorial is somewhat old, but the code is generated from the ember generator.
Any idea?
EDIT:
this is the generated code for the model:
Getbookmarks.StoryEditRoute = Ember.Route.extend({
model: function(params) {
return this.get('store').find('story', this.modelFor('story').id);
},
setupController: function(controller, model){
controller.set('model', model);
buffer = model.get('attributes').map(function(attr){
return { key: attr.get('key'), value: attr.get('value') }
});
controller.set('buffer', buffer)
}
});
Route:
Getbookmarks.Router.map(function () {
this.resource('index',{path : '/'});
this.resource('story', { path: '/story/:story_id' });
this.resource('story_edit', { path: '/story/new' });
});
I hit the same problem yesterday, following the same guide. This seems to be a problem with the routes, as story edit expects a story_id, which we can't give it for a new story. I managed to solve this problem like this, adding a new route for story_new without the story_id:
in routes.js:
this.resource('story_edit', { path: '/story/edit/:story_id' });
this.resource('story_new', { path: '/story/new' });
Then empty StoryEditController (else the app will complain about the "needs: 'story'", besides it will be replaced later anyway) and add this in routes/story_new_route.js:
Getbookmarks.StoryNewRoute = Ember.Route.extend({
renderTemplate: function() {
var controller = this.controllerFor('storyEdit');
this.render('storyEdit', { controller: controller } );
}
});
This new controller will just redirect to storyEdit controller and use storyEdit-Template. Then empty story_edit_route.js (we'll go with the defaults for now) and you app should run.
Hope this works for you, too, otherwise just tell me and I can give more details.