I'm trying to use Firebase with my Ember app. I installed Emberfire but my app returns
Uncaught TypeError: Cannot read property 'extend' of undefined
Because it doesn't read 'FirebaseAdapter'
App.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: new Firebase('https://glowing-fire-number.firebaseio.com/')
});
I checked if Ember data is being loaded before Firebase and EmberFire too. Here are my script references:
<!-- script references -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>
<script src="js/scripts.js"></script>
<script src="js/libs/jquery-1.11.2.min.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/moment.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.12/ember-data.js"></script>
<script src="js/app.js"></script>
<script src="vendor/list-view.js"></script>
<script src="js/controller.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/emberfire/1.3.3/emberfire.min.js"></script>
And my App.js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
this.resource('stacks')
this.resource('stack', {path: ':stack_id'}, function() {
this.route('edit');
});
this.route('create');
});
App.IndexRoute = Ember.Route.extend({
beforeModel: function() {
this.transitionTo('stacks');
}
});
App.StacksRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('stack');
}
});
App.StackRoute = Ember.Route.extend({
model: function(params) {
return stacks.findBy('id', params.stack_id);
}
});
Ember.Handlebars.helper('format-date', function(date) {
return moment(date).fromNow();
});
App.CreateRoute = Ember.Route.extend({
});
//EmberFire stuff
App.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: new Firebase('https://glowing-fire-2514.firebaseio.com/')
});
App.Stack = DS.Model.extend({
title: DS.attr('string'),
location: DS.attr('string'),
date: DS.attr('number'),
details: DS.attr('string')
});
Any idea? I appreciate your help!
It looks like you need to include app.js after you include EmberFire. There's also a missing semicolon in your router after this.resource('stacks') but I don't think that's causing the error.
We just released some updates that make it much easier to use EmberFire as an ember-cli addon, I'd recommend checking it out. Details are here: https://www.firebase.com/blog/2015-03-09-new-emberfire-features.html
Related
How do I render default content into a nested outlet?
For example, if I have an index template such as this:
<script type="text/x-handlebars" id="index">
<div>{{outlet}}</div>
</script>
<script type="text/x-handlebars" id="photo">
Photo!
</script>
<script type="text/x-handlebars" id="default">
Default photo
</script>
And a nested routes:
App.Router.map(function() {
this.resource('index', { path: '/'}, function() {
this.resource('default');
this.resource('photo', { path: ':id' });
});
});
That works fine when I use to link-to helper to load the page into the outlet. However, I cannot work out how to render default content into the outlet when the page first loads.
If I do something like this:
App.IndexRoute = Ember.Route.extend({
renderTemplate: function(controller, model) {
this._super(controller, model);
this.render('default');
},
});
It renders the default content into the main outlet. If I try to specify a named outlet instead:
this.render('default', { outlet: 'centre' });
I get the following error message:
Error while processing route: index.index Assertion Failed: An outlet (centre) was specified but was not found. Error: Assertion Failed: An outlet (centre) was specified but was not found.
Even when using a named outlet:
{{outlet "centre"}}
Any help appreciated.
Remove the index resource, it's already created for you and will make things confusing. Also, if you're needing to hook renderTemplate this early in the game, you're probably not following Ember's conventions.
I would also suggest removing the default resource, as Ember provides that by way of index. The top template is application.hbs, which essentially just has an {{outlet}} in it. So in summary:
Delete the index template
Change id="default" to id="index"
Remove the index resource from your router map
Thanks everyone, I used oshikryu's solution.
Templates:
<script type="text/x-handlebars" id="index">
<div>{{outlet}}</div>
</script>
<script type="text/x-handlebars" id="photo">
Photo!
</script>
<script type="text/x-handlebars" id="default">
Default photo
</script>
JavaScript:
App.Router.map(function() {
this.resource('index', { path: '/'}, function() {
this.resource('photo', { path: ':id' });
});
});
App.IndexIndexRoute = Ember.Route.extend({
renderTemplate: function() {
this.render('default');
}
});
I would like to receive json data from server and then generate html selection tag in Ember. This is my handlebars template:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="rankings">
{{view Ember.Select contentBinding="countries" optionLabelPath="countries.name" optionValuePath="countries.path"}}
</script>
and my Ember trunk
App.ApplicationAdapter = DS.RESTAdapter;
App.Router.map(function() {
this.route('rankings')
});
App.RankingsRoute = Ember.Route.extend({
setupController: function(controller, model) {
controller.set('countries', this.store.findAll('country'));
}
});
App.RankingsController = Ember.Controller.extend({
countries: []
});
App.Country = DS.Model.extend({
path: DS.attr('string'),
name: DS.attr('string'),
}
It is not working fine. I am not having any errors in console and template is not rendering with this route and controller. What can be wrong?
Ember.Select looks for data on your controller's model. You have the countries array set up outside of your content, so it will not be able to view the data.
Personally, I would do it in the following way, though there are a couple of different approaches you can take to get similar results:
App.ApplicationAdapter = DS.RESTAdapter;
App.Router.map(function() {
this.route('rankings')
});
App.RankingsRoute = Ember.Route.extend({
model: function() {
return {countries : this.store.findAll('country')};
}
});
App.RankingsController = Ember.Controller.extend({
});
App.Country = DS.Model.extend({
path: DS.attr('string'),
name: DS.attr('string'),
}
Can someone explain why this works:
Code in App.js:
App.ApplicationRoute = Ember.Route.extend({
setupController : function (params) {
this.controllerFor('food').set('model', App.Food.find(params.food_id));
}
});
But the following won't, unless I explicitly declare App.FoodController = Ember.ObjectController.extend();
App.FoodRoute = Ember.Route.extend({
model : function(params) {
return App.Food.find(params.food_id);
}
});
This is the code I'm using in index.html and does not change between blocks of code
<script type="text/x-handlebars" data-template-name="application">
{{ outlet }}
</script>
<script type="text/x-handlebars" data-template-name="food">
{{name}}
</script>
Router:
App.Router.map(function() {
this.resource( 'foods' );
this.resource( 'food', { path : '/food/:food_id' } );
});
The code that you have shown seems OK. Here is a working fiddle that proves it:
http://jsfiddle.net/ebXeS/2/
The only thing wrong about the code is this part (which is excluded from the fiddle):
App.ApplicationRoute = Ember.Route.extend({
setupController : function (params) {
this.controllerFor('food').set('model', App.Food.find(params.food_id));
}
});
According to your Router definition, you should not have food_id in the parameters of your application route. More than that, you should access the controller for the food route in the uhm... FoodRoute. Read more about Ember and the way it does routing (http://emberjs.com/guides/).
I'm trying to work with Ember's pre4 release, but I'm getting stuck on the Router.
I get an error that says Uncaught TypeError: Cannot Call method 'map' of undefined.
Relavent code:
App.Router.map(function() {
this.route("about", { path: "/about" });
this.route("favorites", { path: "/favs" });
});
Relative documentation.
I've loaded Ember.js and jQuery. Ember pre4 also throws an error: Uncaught TypeError: Object prototype may only be an Object or null.
Am I doing something wrong? Are the guides just not updated?
The code I have so far:
window.App = Ember.Application.create({
ApplicationView: Ember.View.extend({
templateName: 'application'
}),
ApplicationController: Ember.Controller.extend({
}),
SiteView: Em.View.extend({
templateName: 'site-template'
}),
SiteController: Em.ArrayController.extend(),
});
App.Router.map(function() {
this.route("about", { path: "/about" });
this.route("favorites", { path: "/favs" });
});
I'm not seeing anything wrong with the code you posted. Was able to run it in jsbin, and after adding "site" as the default route the app appears to be working.
App = Ember.Application.create({
ApplicationView: Ember.View.extend({
templateName: 'application'
}),
ApplicationController: Ember.Controller.extend({
}),
SiteView: Em.View.extend({
templateName: 'site-template'
}),
SiteController: Em.ArrayController.extend()
});
App.Router.map(function() {
this.route("site", { path: "/" });
this.route("about", { path: "/about" });
this.route("favorites", { path: "/favs" });
});
<script type="text/x-handlebars" data-template-name="site-template">
This is the site template
</script>
<script type="text/x-handlebars">
This is the application template
{{outlet}}
</script>
See jsbin for working copy.
My best guess is that your errors are coming from some either an incompatible version of jQuery or because you don't have handlebars.js - both are required to run ember. Also, in development be sure to use ember-1.0.0-pre.4.js! instead of ember-1.0.0-pre.4.min.js. The minimized version is optimized for production use so does not include helpful debug messages that will make it easier to spot these kind of problems.
In guide I can find:
"
If you are embedding an Ember application into an existing site, you can have event listeners set up for a specific element by providing a rootElement property:
window.App = Ember.Application.create({
rootElement: '#sidebar'
});
"
Please give me example how to use it corretly.
HTML
<script type="text/x-handlebars" data-template-name="app-view">
My ember app view
</script>
This is a static content
<div id="app-container"></div>
This is a static content
JS
App = Ember.Application.create({
rootElement: '#app-container'
});
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName: 'app-view'
});
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
connectOutlets: function (router) {
// do some stuff here...
}
})
})
});
App.initialize();
Here is the JSFiddle: http://jsfiddle.net/MikeAski/xtzNB/