I'm new to EmberJs and was following this post from Adam Hawkins. When I tried to run this in a browser it seems to work but not as expected. when I click a dj in the navigation bar (data-template-name="djs") the browser navigates to the detail of the choosen dj and shows me all his albums. e.g. embertest/index.html#/djs/djs/armin-van-buuren
But if I paste the url (embertest/index.html#/djs/djs/armin-van-buuren) directly in the browser without clicking a dj first in the navigation list I get the message "No Albums" from the handlebars template "djs/dj"
I would expect the same behavior in both scenario's. What am I missing here?
For completeness you can find my ember application and handlebar templates below.
app.js
var App = Ember.Application.create(
{ LOG_TRANSITIONS: true,
LOG_BINDINGS: true,
LOG_VIEW_LOOKUPS: true,
LOG_STACKTRACE_ON_DEPRECATION: true,
LOG_VERSION: true,
debugMode: true
});
window.App = App;
App.DJS = [
{
name: 'Armin van Buuren',
albums: [
{
name: 'A State of Trance 2006',
cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/8/87/ASOT_2006_cover.jpg/220px-ASOT_2006_cover.jpg'
},
{
name: '76',
cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/8/8a/Armin_van_Buuren-76.jpg/220px-Armin_van_Buuren-76.jpg'
},
{
name: 'Shivers',
cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/a/a1/ArminvanBuuren_Shivers.png/220px-ArminvanBuuren_Shivers.png'
}
]
},
{
name: 'Markus Schulz',
albums: [
{
name: 'Without You Near',
cover: 'http://upload.wikimedia.org/wikipedia/en/9/92/Markus_Schulz_Without_You_Near_album_cover.jpg'
},
{
name: 'Progression',
cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/8/81/Markus-schulz-progression_cover.jpg/220px-Markus-schulz-progression_cover.jpg',
},
{
name: 'Do You Dream?',
cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/9/92/Doyoudream.jpg/220px-Doyoudream.jpg',
}
]
},
{
name: 'Christopher Lawrence',
albums: [
{
name: 'All or Nothing',
cover: 'http://s.discogss.com/image/R-308090-1284903399.jpeg',
},
{
name: 'Un-Hooked: The Hook Sessions',
cover: 'http://s.discogss.com/image/R-361463-1108759542.jpg'
}
]
},
{
name: 'Above & Beyond',
albums: [
{
name: 'Group Therapy',
cover: 'http://s.discogss.com/image/R-2920505-1345851845-3738.jpeg'
},
{
name: 'Tri-State',
cover: 'http://s.discogss.com/image/R-634211-1141297400.jpeg',
},
{
name: 'Tri-State Remixed',
cover: 'http://s.discogss.com/image/R-1206917-1200735829.jpeg'
}
]
}
];
App.Router.map(function() {
this.resource('djs', function() {
this.route('dj', { path: '/djs/:name' });
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('djs');
}
});
App.DjsRoute = Ember.Route.extend({
model: function() {
return App.DJS;
}
});
App.DjsDjRoute = Ember.Route.extend({
serialize: function(dj) {
return {
name: dj.name.dasherize()
}
}
});
Index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- application template -->
<script type="text/x-handlebars">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
{{#linkTo 'djs' class="brand"}}On The Decks{{/linkTo}}
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="djs">
<div class="span2">
<ul class="nav nav-list">
{{#each controller}}
<li>{{#linkTo 'djs.dj' this}}{{name}}{{/linkTo}}
{{/each}}
</ul>
</div>
<div class="span8">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="djs/dj">
<h2>{{name}}</h2>
<h3>Albums</h3>
{{#if albums}}
<ul class="thumbnails">
{{#each albums}}
<li>
<div class="thumbnail">
<img {{bindAttr src="cover" alt="name"}} />
</div>
</li>
{{/each}}
{{else}}
<p>No Albums</p>
{{/if}}
</script>
<script type="text/x-handlebars" data-template-name="djs/index">
<p class="well">Please Select a DJ</p>
</script>
<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember-1.0.0.js"></script>
<script src="js/app.js"></script>
</body>
</html>
You are rigth, I try to explain you
Ember has severals ways to go to a Route, here we have two examples.
The linkTo helper, and directly writing the url.
With the linkTo we provide a model to the route, the this keyword
{{#linkTo 'djs.dj' this}}{{name}}{{/linkTo}}
For the url way, ember route needs to know the model to represent, and for this executes the model hook of the route (missing in your example), you can def the dj route like this.
App.DjsDjRoute = Ember.Route.extend({
serialize: function(dj) {
return {
name: dj.name.dasherize()
}
},
model:function(dj){
return App.DJS.find(function(item){
//The url param is the dasherized name
return item.name.dasherize() == dj.name;});
}
});
Also there is a typo defining the routes and this.route('dj', { path: '/djs/:name' }); should be this.route('dj', { path: '/:name' });
Complete JSFiddle http://fiddle.jshell.net/AM7sf/10/show/#/djs
Related
I want to write treeview using angularjs. I am using ng-include for recursive call..everything is fine except from ng-click..when each node is clicked..the hierarchy call is from child to it's parents and for every node in this hierarchy the ng-click fires. how can i solve this problem??..I have this exact problem using another approach (appending element on post-link which I think is not a good way) instead of ng-include.here is my code:
index.html:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
</head>
<body >
<div ng-app="app" ng-controller='AppCtrl'>
<ul>
<li ng-repeat="category in categories" ng-click='nodeSelected(category)' ng-include="'template.html'"></li>
</ul>
</div>
<script src="controller.js"></script>
</body>
</html>
template.html:
{{ category.title }}
<ul ng-if="category.categories">
<li ng-repeat="category in category.categories" ng-click='nodeSelected(category)' ng-include="'template.html'">{{ category.title }}</li>
</ul>
controller.js
var app = angular.module('app', []);
app.controller('AppCtrl', function ($scope) {
$scope.nodeSelected = function(category){
alert('This node is selected' + category.title);
}
$scope.categories = [
{
title: 'Computers',
categories: [
{
title: 'Laptops',
categories: [
{
title: 'Ultrabooks'
},
{
title: 'Macbooks',
categories:[
{
title:'Paridokht'
},
{
title:'Shahnaz',
categories:[
{
title:'Sohrab'
}
]
}
]
}
]
},
{
title: 'Desktops'
},
{
title: 'Tablets',
categories: [
{
title: 'Apple'
},
{
title: 'Android'
}
]
}
]
},
{
title: 'Printers'
}
];
});
here is the output picture:
for example when paridokht node is selected, the alert hierarchy in order is paridokht,macbooks,laptops,computers (from child to parents). please help me to solve this issue. it's killing me! :(
Try stopping event from bubble-ing up in the DOM tree.
In you ng-click:
ng-click='nodeSelected($event, category)'
In your controller:
$scope.nodeSelected = function($event, category){
$event.stopPropagation();
alert('This node is selected' + category.title);
}
I'm building a web video app that functions in a similar way to YouTube. My desired URL path is appname.com/video-title/video-id. I've represented it in this way:
App.Router.map(function() {
this.resource('videos', { path: '/:video_title' }, function(){
this.resource('video', { path: '/:video_id' });
});
});
The problem that I'm having is that the video-id url is also displaying the video-title template.
The video-title url should display search results of that video name and the video-id url should display the specific video and play it in a video player.
HTML:
<script type="text/x-handlebars" data-template-name="videos">
<ul>
{{#each video in model}}
<li>{{video.title}} by {{video.author}}</li>
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="videos">
<p>{{title}}</p>
</script>
Model:
var videos = [{
id: '1',
title: 'Skiing in Tahoe',
author: 'daniel'
},{
id: '2',
title: 'Exploring San Francisco',
author: 'nickmillerza'
}];
I'm new to Ember - perhaps I shouldn't use it for an app like this?
You can totally do this
App.VideoRoute = Ember.Route.extend({
model: function(params){
// return model
},
renderTemplate: function(controller) {
// render it into the videos outlet
this.render('videos', {controller: controller});
}
});
I'm working through a tutorial/example from codeschool. It's all working nicely but the example is using
App.ApplicationAdapter = DS.FixtureAdapter.extend();
and I would like to now keep everything exactly as it is, but move the product data to an external JSON file.
Here is my app.js file:
var App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function(){
this.route('about', {path:'/aboutus'});
this.resource('products', function() {
this.resource('product', { path: '/:product_id' });
});
});
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.IndexController = Ember.Controller.extend ({
productsCount: 6,
logo: 'images/logo.png',
time: function() {
return (new Date()).toDateString()
}.property()
});
App.Product = DS.Model.extend({
title: DS.attr('string'),
price: DS.attr('number'),
description: DS.attr('string'),
isOnSale: DS.attr('boolean'),
image: DS.attr('string'),
reviews: DS.hasMany('review', {async:true})
});
App.Review = DS.Model.extend ({
text: DS.attr('string'),
reviewedAt: DS.attr('date'),
product: DS.belongsTo('product')
});
App.ProductsRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('product');
}
});
App.Product.FIXTURES = [
{
id: 1,
title: 'Flint',
price: 99,
description: 'Flint is a hard, sedimentary cryptocrystalline form of the mineral quartz, categorized as a variety of chert.',
image: 'images/products/flint.png',
reviews: [100,101]
},
{
id: 2,
title: 'Kindling',
price: 249,
description: 'Easily combustible small sticks or twigs used for starting a fire.',
image: 'images/products/kindling.png',
reviews: [100,101]
}
];
App.Review.FIXTURES = [
{
id: 100,
product: 1,
text: "Sarted a fire in no time"
},
{
id: 101,
product: 1,
text: "Not the brightest flame of the flame"
}
];
Here is my HTML (index.html) file:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.2.js"></script>
<script src="handlebars-v2.0.0.js"></script>
<script src="ember-1.9.1.js"></script>
<script src="ember-data.js"></script>
<script src="app.js"></script>
<script src="products.json"></script>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
{{#link-to 'index'}}Homepage{{/link-to}}
{{#link-to 'about'}}About{{/link-to}}
{{#link-to 'products'}}Products{{/link-to}}
<div class='navbar'>..</div>
<div class='container'>{{outlet}}</div>
<footer class='container'>..</div>
</script>
<script type='text/x-handlebars' data-template-name='index'>
<h1>Welcome to the Flint & Flame!</h1>
<p>There are {{productsCount}} products</p>
<img {{bind-attr src='logo'}} alt='logo' />
<p>Rendered on {{time}}</p>
</script>
<script type='text/x-handlebars' data-template-name='about'>
<h1>About the Fire Spirits</h1>
</script>
<script type='text/x-handlebars' data-template-name='products'>
<div class='row'>
<div class='col-md-3'>
<div class='list-group'>
{{#each}}
{{#link-to 'product' this classNames='list-group-item'}}
{{title}}
{{/link-to}}
{{/each}}
</div>
</div>
<div class='col-sm-9'>
{{outlet}}
</div>
</div>
</script>
<script type='text/x-handlebars' data-template-name='product'>
<div class ='row'>
<div class ='col-md-7'>
<h1>{{title}}</h1>
<p>{{description}}</p>
<p>Buy for $ {{price}}</p>
</div>
<div class='col-md-5'>
<img {{bind-attr src='image'}} class ='img-thumbnail' 'img-rounded' />
</div>
<h3>Reviews</h3>
<ul>
{{#each reviews}}
<li>{{text}}</li>
{{else}}
<li><p class='text-muted'>
<em>No reviews yet</em>
</p><li>
{{/each}}
</ul>
</div>
</script>
<script type='text/x-handlebars' data-template-name='products/index'>
<p class='text-muted'>Choose a product</p>
</script>
</body>
</html>
The tutorial says to create a json file with the following in it:
{"products": [
{
"id": 1,
"title": "Flint",
"price": 99,
"description": "Flint is a hard, sedimentary cryptocrystalline form of the mineral quartz, categorized as a variety of chert.",
"isOnSale": true,
"image": "images/products/flint.png",
"reviews": [100,101]
},
{
"id": 2,
"title": "rfgergerg",
"price": 34,
"description": "sdfdfsdfsdfsdf, categorized as a variety of chert.",
"isOnSale": false,
"image": "images/products/flint.png",
"reviews": [100,101]
}
],
"reviews": [
{"id": 100, "product":1, "text": "efefefefefe"}
]
}
and then to change
App.ApplicationAdapter = DS.FixtureAdapter.extend();
to:
App.ApplicationAdapter = DS.RESTAdapter.extend();
etc.
I can't seem to link to this JSON file. I just wanted to know, should I add anything else to the above ApplicationAdapter? Am I right to include the JSON file in the head of my HTML file?
Basically just need some assistance in making the above example, which works fine, use an external JSON file instead.
Thanks!
UPDATE
I suppose to make this questions a bit simpler:
I have an index.html file, an app.js file, and a products.json file , all in the same directory
I want to use this in my app.js file:
App.ApplicationAdapter = DS.RESTAdapter.extend({
xxxxxxxxx
});
What do I put in 'xxxxxx' to load my json file?
Thanks!
UPDATE
Ok, I have figured this out duh!
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: '/name of directory'
});
In my case my project is at localhost/ember
and the following works:
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: '/ember'
});
I had the same problem.
Instead of linking to the JSON file from the HTML you must extend the DS.RESTAdapter with a request to your file, like this:
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: '/products.json?jsonp=?'
});
This should work.
Let me know!
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: '/name of directory'
});
Also note that I had to remove the .json extension from my file. Now it's just call products (a text file). When I add the .json extension it can't find the file.
I'm working on ember.js tutorial now. I got a problem on "adding child routes" chapter. My todos list is not displayed. The "todos" template outputing just fine but "todos/index" template doesn't work at all. The console does not show any errors. I guess that this is some local problem or some bug. Maybe someone has already met with a similar problem. What could be the reason of this issue? How can i solve it?
Thanks.
HTML:
<html>
<head>
<meta charset="utf-8">
<title>Ember.js • TodoMVC</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="todos/index">
<ul id="todo-list">
{{#each itemController="todo"}}
<li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
{{#if isEditing}}
{{edit-todo class="edit" value=title focus-out="acceptChanges" insert-newline="acceptChanges"}}
{{else}}
{{input type="checkbox" checked=isCompleted class="toggle"}}
<label {{action "editTodo" on="doubleClick"}}>{{title}}</label><button {{action "removeTodo"}} class="destroy"></button>
{{/if}}
</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
{{input type="text" id="new-todo" placeholder="What needs to be done?"
value=newTitle action="createTodo"}}
</header>
<section id="main">
{{outlet}}
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>{{remaining}}</strong> {{inflection}} left</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
</script>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.2.0.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
<script src="js/route.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/controllers/todo_controller.js"></script>
<script src="js/controllers/todos_controller.js"></script>
<script src="js/views/edit_todo_view.js"></script>
</body>
</html>
JS:
window.Todos = Ember.Application.create();
Todos.ApplicationAdapter = DS.FixtureAdapter.extend();
Todos.Router.reopen({
rootURL: '/one/'
});
Todos.Router.map(function () {
this.resource('todos', { path: '/' });
});
Todos.TodosRoute = Ember.Route.extend({
model: function () {
return this.store.find('todo');
}
});
Todos.TodosIndexRoute = Ember.Route.extend({
model: function () {
return this.modelFor('todos');
}
});
Todos.Todo = DS.Model.extend({
title:DS.attr('string'),
isCompleted:DS.attr('boolean')
});
Todos.Todo.FIXTURES = [
{
id: 1,
title: 'Learn Ember.js',
isCompleted: true
},
{
id: 2,
title: '...',
isCompleted: false
},
{
id: 3,
title: 'Profit!',
isCompleted: false
}
];
Todos.TodosController = Ember.ArrayController.extend({
actions: {
createTodo: function () {
// Get the todo title set by the "New Todo" text field
var title = this.get('newTitle');
if (!title.trim()) { return; }
// Create the new Todo model
var todo = this.store.createRecord('todo', {
title: title,
isCompleted: false
});
// Clear the "New Todo" text field
this.set('newTitle', '');
// Save the new model
todo.save();
}
},
remaining: function () {
return this.filterBy('isCompleted', false).get('length');
}.property('#each.isCompleted'),
inflection: function () {
var remaining = this.get('remaining');
return remaining === 1 ? 'item' : 'items';
}.property('remaining'),
});
Todos.TodoController = Ember.ObjectController.extend({
actions:{
editTodo: function () {
this.set('isEditing', true);
},
acceptChanges: function () {
this.set('isEditing', false);
if (Ember.isEmpty(this.get('model.title'))) {
this.send('removeTodo');
} else {
this.get('model').save();
}
},
removeTodo: function () {
var todo = this.get('model');
todo.deleteRecord();
todo.save();
},
},
isEditing: false,
isCompleted: function(key, value){
var model = this.get('model');
if (value === undefined) {
// property being used as a getter
return model.get('isCompleted');
} else {
// property being used as a setter
model.set('isCompleted', value);
model.save();
return value;
}
}.property('model.isCompleted')
});
Technically this isn't a bug, the team figured there is no point in having an index route if you can't go any deeper in the router (this is due to the fact that the todos route and template will render, so there is no real need for the index route. That being said, if you really want it, add an anonymous function and you'll get it.
Todos.Router.map(function () {
this.resource('todos', { path: '/' },function () {});
});
https://github.com/emberjs/ember.js/issues/3995
I had this problem too. After much perplexity, the solution was to use a version of index.html that actually had the <script> wrapped <ul>, instead of the one where I was moving that block around to see if it made a difference and ended up having it nowhere.
Given the following code, I thought the person.index and nested person.finish routes would use the PersonController content/model property since theirs was empty/undefined? What am I doing wrong? http://jsfiddle.net/EasyCo/MMfSf/5/
To be more concise: When you click on the id, the {{id}} and {{name}} are blank? How do I fix that?
Functionality
// Create Ember App
App = Ember.Application.create();
// Create Ember Data Store
App.Store = DS.Store.extend({
revision: 11,
adapter: 'DS.FixtureAdapter'
});
// Create parent model with hasMany relationship
App.Person = DS.Model.extend({
name: DS.attr( 'string' ),
belts: DS.hasMany( 'App.Belt' )
});
// Create child model with belongsTo relationship
App.Belt = DS.Model.extend({
type: DS.attr( 'string' ),
parent: DS.belongsTo( 'App.Person' )
});
// Add Person fixtures
App.Person.FIXTURES = [{
"id" : 1,
"name" : "Trevor",
"belts" : [1, 2, 3]
}];
// Add Belt fixtures
App.Belt.FIXTURES = [{
"id" : 1,
"type" : "leather"
}, {
"id" : 2,
"type" : "rock"
}, {
"id" : 3,
"type" : "party-time"
}];
App.Router.map( function() {
this.resource( 'person', { path: '/:person_id' }, function() {
this.route( 'finish' );
});
});
// Set route behaviour
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Person.find();
},
renderTemplate: function() {
this.render('people');
}
});
Templates
<script type="text/x-handlebars">
<h1>Application</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" id="people">
<h2>People</h2>
<ul>
{{#each controller}}
<li>
<div class="debug">
Is the person record dirty: {{this.isDirty}}
</div>
</li>
<li>Id: {{#linkTo person this}}{{id}}{{/linkTo}}</li>
<li>Name: {{name}}</li>
<li>Belt types:
<ul>
{{#each belts}}
<li>{{type}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" id="person">
<h2>Person</h2>
Id from within person template: {{id}}<br><br>
{{outlet}}
</script>
<script type="text/x-handlebars" id="person/index">
Id: {{id}}<br>
Name: <a href="#" {{action "changeName"}}>{{name}}</a><br><br>
{{#linkTo index}}Go back{{/linkTo}}<br>
{{#linkTo person.finish}}Go to finish{{/linkTo}}
</script>
<script type="text/x-handlebars" id="person/finish">
<h2>Finish</h2>
{{id}}
</script>
You can use this in your router:
model: function() {
return this.modelFor("person");
}
Instead of your's:
controller.set('content', this.controllerFor('person'));
Your views were served through different controllers, either Ember's generated one or the one you defined PersonIndexController and that contributed to the issue you were facing. Instead of patching your original example to make it work, i instead reworked it to show you how you should structure your views/routes to leverage Emberjs capabilities.
You should design your application/example as a series of states working and communicating with each other and captured in a Router map. In your example, you should have a people, person resource and a finish route with corresponding views and controllers, either you explicitly create them or let Ember do that for you, providing you're following its convention.
Here's a working exemple and below I highlighted some of the most important parts of the example
<script type="text/x-handlebars" data-template-name="people">
<h2>People</h2>
<ul>
{{#each person in controller}}
<li>
<div class="debug">
Is the person record dirty: {{this.isDirty}}
</div>
</li>
<li>Id: {{#linkTo 'person' person}}{{person.id}}{{/linkTo}}</li>
<li>Name: {{person.name}}</li>
<li>Belt types:
<ul>
{{#each person.belts}}
<li>{{type}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="person">
<h2>Person</h2>
Id from within person template: {{id}}<br><br>
Id: {{id}}<br>
Name: <a href="#" {{action "changeName"}}>{{name}}</a><br><br>
{{#linkTo index}}Go back{{/linkTo}}<br>
{{#linkTo person.finish}}Go to finish{{/linkTo}}
{{outlet}}
</script>
Models, Views, Controllers and Route definitions
DS.RESTAdapter.configure("plurals", { person: "people" });
App.Router.map( function() {
this.resource('people',function() {
this.resource('person', { path: ':person_id' }, function() {
this.route( 'finish');
});
})
});
App.PeopleController = Ember.ArrayController.extend();
App.PeopleRoute = Ember.Route.extend({
model: function() {
return App.Person.find();
}
})
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('people');
}
});
App.PersonRoute = Ember.Route.extend({
model: function(params) {
debugger;
return App.Person.find(params.client_id);
},
renderTemplate: function() {
this.render('person',{
into:'application'
})
}
})
App.PersonFinishRoute = Ember.Route.extend({
renderTemplate: function() {
this.render('finish',{
into:'application'
})
}
})