How to write my Ember router to achieve desired interface? - ember.js

I've been playing with this for some time, and maybe it comes down to me not understanding how Ember (and/or ember-cli) treats routes and resources differently, but I'm trying to achieve an interface like this and having trouble with what my router and file structure should be for ember-cli. I've read the Ember docs through numerous times, but it's still not all clicking for me.
Desired interface
It mostly works, but when viewing /projects I don't see the logo, and when viewing /project/1/details[team | budget] I don't see my navigation, which is in my project.hbs file.
router.js
Router.map(function() {
this.route('projects');
this.resource('project', { path: 'project/:project_id' }, function() {
this.route('details');
this.route('team');
this.route('milestones');
this.route('budget');
});
});
File structure
App/
routes/
index.js
projects.js
project.js
templates/
application.hbs
index.hbs
projects.hbs
project/
index.hbs
budget.hbs
details.hbs
team.hbs

javascript
App = Ember.Application.create();
App.Router.map(function() {
this.route('projects');
this.resource('project', {path: 'projects/:id'}, function () {
this.route('details');
this.route('team');
this.route('milestones');
this.route('budget');
});
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
App.ProjectsRoute = Ember.Route.extend({
model: function() {
return [
Ember.Object.create({id: 1, name: "John"}),
Ember.Object.create({id: 2, name: "Bob"})
];
}
});
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.7.0/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars">
{{#link-to 'index'}}<h2>Welcome to Ember.js</h2>
Logo<br/><br/>
{{/link-to}}
{{#link-to 'projects'}}Projects{{/link-to}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class='index'>
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</div>
</script>
<script type="text/x-handlebars" data-template-name="projects">
<div class='projects'>
<h3>Projects</h3>
{{#each}}
<li>{{#link-to 'project' this}}{{name}}{{/link-to}}</li>
{{/each}}
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="project">
<div class='project'>
<h4>{{name}}</h4>
<ul>
<li>{{#link-to 'project.details'}}Details{{/link-to}}</li>
<li>{{#link-to 'project.team'}}Team{{/link-to}}</li>
<li>{{#link-to 'project.milestones'}}Milestones{{/link-to}}</li>
<li>{{#link-to 'project.budget'}}Budget{{/link-to}}</li>
</ul>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="project/details">
Some deets
</script>
<script type="text/x-handlebars" data-template-name="project/team">
the team
</script>
<script type="text/x-handlebars" data-template-name="project/milestones">
milestones
</script>
<script type="text/x-handlebars" data-template-name="project/budget">
budget
</script>
</body>
</html>
http://emberjs.jsbin.com/kovuxo/1#/

Related

Emberjs store error-Uncaught TypeError: Object [object Object] has no method 'trasitionTo'

I am a beginner to Emberjs and please go through the code and please guide me where am I wrong.
.js file
Sample = Ember.Application.create();
Sample.Router.map(function(){
this.route('view');
this.resource('add');
})
Add = Ember.Object.extend();
View = Ember.Object.extend();
Sample.AddNewRoute = Ember.Route.extend({
model:function(){
return Sample.Add.createRecord();
}
});
Sample.ViewController = Ember.ArrayController.extend();
Sample.AddController = Ember.ObjectController.extend({
content:[],
save:function(){
this.get("model.transaction");
this.get("target").trasitionTo('view');
}
});
Sample.ViewController = Ember.ArrayController.extend();
Sample.Store = DS.Store.extend({
revision:11,
adapter: DS.LSAdapter.create(),
});
Sample.Add = DS.Model.extend({
name: DS.attr("string"),
desig: DS.attr("string"),
age: DS.attr("integer")
});
.html file
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:/Users/Guest/Downloads/ember/starter-kit-1.0.0/js/libs/jquery-1.9.1.js"></script>
<script type="text/javascript" src="C:/Users/Guest/Downloads/ember/starter-kit-1.0.0/js/libs/handlebars-1.0.0.js"></script>
<script type="text/javascript" src="C:/Users/Guest/Downloads/ember/starter-kit-1.0.0/js/libs/ember-1.0.0.js"></script>
<script type="text/javascript" src="C:/Users/Guest/Downloads/ember/starter-kit-1.0.0/js/libs/ember-data.js"></script>
<script type="text/javascript" src="C:/Users/Guest/Downloads/ember/starter-kit-1.0.0/js/libs/localstorage_adapter.js"></script>
<script type="text/javascript" src="C:/Users/Guest/Downloads/ember/starter-kit-1.0.0/js/sample.js"></script>
<meta charset=utf-8 />
<title>Demo application</title>
</head>
<body>
<script type="text/x-handlebars">
<h1>Welcome to Demo!</h1>
{{#link-to 'add'}}Add Member{{/link-to}}
{{#link-to 'view'}}View Members{{/link-to}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name ='add'>
<h1>Add member!</h1>
<form {{action 'save' on='submit'}}>
<br>{{#view Ember.TextField valueBinding="name" placeholder= "Enter the name"}}{{/view}}</br>
<br>{{#view Ember.TextField valueBinding="desig" placeholder= "Enter the designation"}}{{/view}}</br>
<br>{{#view Ember.TextField valueBinding="age" placeholder= "Enter the age"}}{{/view}}</br>
<br><button {{action "save"}}>Add Member</button></br>
</form>
</script>
<script type="text/x-handlebars" data-template-name ='view'>
<h3><strong>All Registered Members!</strong>
<br></br>
{{#each controller}}
<br>{{name}}</br>
<br>{{desig}}</br>
<br>{{age}}</br>
{{else}}
No members registered yet! :(
{{/each}}
</script>
enter code here
</body>
</html>
After I click the 'Add Member button I am getting the following error:
Uncaught TypeError: Object [object Object] has no method 'trasitionTo'
You have a record Add which it is using for handling the click. Can you rename Add record to something else?
Add = Ember.Object.extend();//use someother name instead of Add
Instead name it something else like MyAddRecord or something else. Once you do that you should will get correct or relevant error message.

Linking between templates

I don't understand templates and routes.
My code:
<script type="text/x-handlebars" data-template-name="application">
Hello
<nav>
{{#link-to 'index'}}Index{{/link-to}}
{{#link-to 'about'}}About{{/link-to}}
{{#link-to 'contact'}}Contact{{/link-to}}
</nav>
</script>
<script type="text/x-handlebars" data-template-name="about">
about
</script>
<script type="text/x-handlebars" data-template-name="contact">
favorites
</script>
and router.js:
App.Router.map(function () {
this.route("index", { path: "/" });
this.route("about", { path: "/about" });
this.route("contact", { path: "/contact" });
});
What is wrong? Output is blank page. There appeared a problem when I had inserted {{#link-to}} code.
I did that by an emberjs guide.
You need to define a place where your templates you are linking to should display, such a placeholder is called an outlet, so simply add {{outlet}} where in you application template you want your routes corresponding templates to be rendered into:
Also note, the linkTo helper is called linkTo and not link-to depending on the ember release you are using:
<script type="text/x-handlebars" data-template-name="application">
Hello
<nav>
{{#linkTo 'index'}}Index{{/linkTo}}
{{#linkTo 'about'}}About{{/linkTo}}
{{#linkTo 'contact'}}Contact{{/linkTo}}
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="about">
about
</script>
<script type="text/x-handlebars" data-template-name="contact">
favorites
</script>
Working jsbin.
Hope it helps.

Ember.js template rendering

I'm possibly reading the docs wrong. Can someone please check out my gist and tell me why the invoices/index template is not rendering?
When I read the ember.js docs it states it should render
posts
↳posts/index
(invoices/index in my case). The invoices template renders however.
Handlebars:
<script type="text/x-handlebars" data-template-name="application">
<h1>Ember Committers</h1>
<nav>
{{#linkTo "index"}}Index{{/linkTo}}
{{#linkTo "about"}}About{{/linkTo}}
{{#linkTo "invoices"}}Invoices{{/linkTo}}
</nav>
{{ outlet }}
</script>
<script type="text/x-handlebars" data-template-name="invoices">
<h1>Invoices</h1>
</script>
<script type="text/x-handlebars" data-template-name="invoices/index">
<ul>
{{#each invoice in invoices }}
<li>{{#linkTo "show" invoice.id}}{{ invoice.id }}{{/linkTo }}</li>
{{/each }}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="invoices/show">
<p>Invoice - {{ name }}</p>
</script>
<script type="text/x-handlebars" data-template-name="phone">
<p>Contributor - {{ title }}</p>
</script>
<script type="text/x-handlebars" data-template-name="about">
<p>About {{ title }}</p>
</script>
<script type="text/x-handlebars" data-template-name="index">
<p>Index</p>
</script>
JavaScript:
<script type="text/javascript" defer>
var App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.Router.map(function () {
this.route("about");
this.resource("invoices", { path: "/invoices" }, function () {
this.resource("show", { path: "/:id" });
});
});
var invoices = [
{id: 1},
{id: 2}
];
App.AboutRoute = Ember.Route.extend({
setupController: function (controller) {
// Set the IndexController's `title`
controller.set('title', "My App");
}
});
App.InvoicesIndexController = Ember.ArrayController.extend({
invoices: invoices
});
</script>
You need to include an {{outlet}} tag in your invoices template. Since index and show are nested resources of invoices, their templates get rendered inside the outlet that you specify in the invoices template.
Take a look at the nested resources part of the Ember.js guide.

EmberJS: template not rendering controller properties

I'm trying to setup an emberJS app, very basic. Here it is:
<!doctype html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/handlebars-1.0.rc.1.js"></script>
<script src="js/ember.js"></script>
<script>
window.App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend({
firstName: "Trek",
lastName: "Glowacki"
});
</script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<div>
Name: {{firstName}} {{lastName}}
</div>
</script>
</body>
</html>
For some reason only Name: is rendered. Any suggestions why 'firstName' and 'lastName' are empty ?
Cheers
The problem was solved by updating the libraries used (see answer from Sean Keating)

Using multiple named outlets and a wrapper view with no content in Emberjs

I'm trying to use multiple named outlets with Ember.js. Is my approach below correct?
Markup:
<script type="text/x-handlebars" data-template-name="application">
<div id="mainArea">
{{outlet main_area}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="home">
<ul id="sections">
{{outlet sections}}
</ul>
<ul id="categories">
{{outlet categories}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="sections">
{{#each section in controller}}
<li><img {{bindAttr src="section.image"}}></li>
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="categories">
{{#each category in controller}}
<img {{bindAttr src="category.image"}}>
{{/each}}
</script>​
JS Code:
Here I set the content of the various controllers to data grabbed from a server and connect outlets with their corresponding views. Since the HomeController has no content, set its content to an empty object - a hack to get the rid of this error message:
Uncaught Error: assertion failed: Cannot delegate set('categories'
) to the 'content' property of object
proxy : its 'content' is undefined.
App.Router = Ember.Router.extend({
enableLogging: false,
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router){
router.get('sectionsController').set('content',App.Section.find());
router.get('categoriesController').set('content', App.Category.find());
router.get('applicationController').connectOutlet('main_area', 'home');
router.get('homeController').connectOutlet('home', {});
router.get('homeController').connectOutlet('categories', 'categories');
router.get('homeController').connectOutlet('sections', 'sections');
}
})
})
});
​
If it's any help, I got this error because I was connecting to an Ember.ObjectController instead of Ember.Controller.