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
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.
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.
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.
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)
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.