Ember's Router for pre4 - ember.js

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.

Related

FirebaseAdapter not recognized on my Ember app

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

Ember How can i render a child route into his parent?

I'm new with Ember and trying to render the content into the category template. So, if I clicked on the category, it will show me details and list content in the category template. I have tested something, but it didn't work. I have searched for this problem, but I can't solve it. I hope you can help me.
best regards
app.js
TableNotices.Router.map(function() {
this.resource('tableNotices', { path: '/' }, function(){
this.resource('category', {path: ':id'}, function(){
this.route('contents');
this.resource('content', {path: '/content/:id'});
});
});
});
TableNotices.ContentsRoute = Ember.Route.extend({
model: function() {
return this.modelFor('category').get('contents');
}
});
TableNotices.Content = DS.Model.extend({
content: DS.attr('string'),
contentType: DS.attr('string'),
orderPos: DS.attr('number'),
category: DS.belongsTo('category')
});
TableNotices.Category = DS.Model.extend({
name: DS.attr('string'),
parent: DS.attr('number'),
picture: DS.attr('string'),
contents: DS.hasMany('content', {async:true})
});
index.html:
<script type="text/x-handlebars" data-template-name="category">
{{name}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="contents">
foobar
</script>
jsbin
In the route you can specify how to render the templates with renderTemplate.
TableNotices.ContentsRoute = Ember.Route.extend({
model: function() {
return this.modelFor('category').get('contents');
}
renderTemplate: function() {
this.render('contents', { // the template to render
into: 'category', // the template to render into
outlet: 'category', // the name of the outlet in that template
controller: 'contents' // the controller to use for the template
});
}
});
<script type="text/x-handlebars" data-template-name="category">
{{name}}
{{outlet "contents"}}
</script>
Although Aaron Renoir's answer will work, the best way to think of this is that because your routes are nested, your templates need to be nested as well. Ember will render each of the nested templates into the parent template when these nested routes are activated. This gives you a nice way to delegate different parts of your page to various templates which helps to keep the content organized.
Each of your "parent" templates will need an {{outlet}} for the child templates to be rendered into.

Ember. Live uploading templates

I want uploading ember templates from server.
I seen for that need used like:
$.ajax({
url: 'url_to_template_text',
dataType: 'text',
success: function (resp) {
App.AboutView = Ember.View.extend({
template: Ember.Handlebars.compile(resp)
});
}
});
but i cant understand how rendering this view on page.
App.AboutView.append() - is not worked
if add routing for that view, then do not have time to render getting template:
<script type="text/x-handlebars" >
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="about">
That text cant be show
</script>
//////JS
$.ajax({
url: 'url_to_template_text',
dataType: 'text',
success: function (resp) {
App.AboutView = Ember.View.extend({
templateName: 'about',
template: Ember.Handlebars.compile(resp)
});
}
});
App.Router.map(function() {
this.route("about", { path: "/" });
});
Not worked too. Is rendering oldest template content(i mean "That text cant be show")
Please help me, perhaps i used bad way?
You can use the beforeModel hook to load the template alongside the model hook. In this case it appears you also want to use it to resolve as the default view for the route. You can do this using the Ember conventions, AboutRoute -> AboutView -> AboutController, etc.
beforeModel: function() {
return $.ajax({
url: '/about.hbs'
})
.then(function(response) {
Em.TEMPLATES.about = Em.Handlebars.compile(response);
});
},
After you load the template you need to assign it to the global Ember.TEMPLATES object.
Another approach, is to do the same for a view's template. By reopening the View's class and adding the loaded template as you do above. Note, you still have to use the view inside your handlebars template with {{view App.MyView}}.
Here's a jsbin example.

Ember.js Router v2 dynamic slug

In the following example, using the new Router v2 API, the ember application behaves as expected with one exception. When hovering over the dynamically created links, using a registered #linkTo Handlebars the url shows undefined.
How do I have a slug field in the URL?
Here is the model
App.Todo = DS.Model.extend({
slug: DS.attr('string'),
date: DS.attr('date'),
updated: DS.attr('date'),
task: DS.attr('string'),
description: DS.attr('string')
});
My Router
App.Router.map(function(match){
this.route('index', {path: '/'});
this.resource('todos', {path: '/todos'}, function(){
this.resource('create', {path: '/create'});
this.resource('todo', {path: '/:slug'}, function(){
this.resource('edit', {path: 'edit'});
});
});
});
I know that this does show 'undefined', but this would be a nice (Handlebars)
{{#each todo in tasks}}
<div class="user">
{{#linkTo todo todo.slug}}<h4><i class="icon-list"></i>{{todo.task}}</h4>{{/linkTo}}
<p>{{todo.description}}</p>
</div>
{{/each}}
Thanks for any pointers! I'm using Ember-data also
Here is a example fiddle
http://jsfiddle.net/R2SPs/6/
This works for ember routing v2.1 (01.16.13)
Thanks to rakl on #emberjs on IRC here is a mixin that solves the problem
App.SlugRouter = Ember.Mixin.create({
serialize: function(model, params) {
var name, object;
object = {};
name = params[0];
object[name] = model.get('slug');
return object;
}
});
Now just place that in your Router and your golden
App.TodoRoute = Ember.Route.extend(App.SlugRouter,{
//insert your code
});
The path of the route is "todo.index" with the resource definition:
this.resource('todo', {path: '/:slug'}, ...
So create Route and Controller for it.

Emberjs rootElement

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/