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)
Related
Nothing handled the action error occurs for the following code. How to resolve this?
I have created a view, an object for my sample app using ember. But the action part is not working.
How to bind an action to a view?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<ul class="mod-choosable-list">
{{view Ember.CollectionView
contentBinding="App.teachersController"
itemViewClass="App.TeacherView"
tagName="div"
}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="teacher-view">
<div {{action 'refresh'}}><b>{{view.content.name}}</b></div>
</script>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
JS:
App = Ember.Application.create({});
App.Teacher = Ember.ObjectController.extend({
id: null,
name: null,
students: null,
actions: {
refresh: function(){
alert("refresh");
}
}
});
App.TeacherView = Ember.View.extend({
templateName: 'teacher-view'
});
App.set('teachersController', Ember.ArrayController.create({
content: [
App.Teacher.create({id:1, name: "mr.katz", students: [2, 3]}),
App.Teacher.create({id:2, name: "mr.dale", students: [1]})
]
}));
When you trigger the action refresh, ember will look for the action in the controller. Since you have not specified a controller for the view, the controller for the application template will be used which is App.ApplicationController.
You can use the following code and your action will trigger.
App.ApplicationController = Em.Controller.extend({
actions: {
refresh: function(){
alert("refresh");
}
}
});
You can specify the actions in the view too. In that case you will need to specify the target for the action. This will tell ember where to look for the action handler.
App.TeacherView = Ember.View.extend({
templateName: 'teacher-view',
actions: {
refresh: function(){
alert("refresh");
}
}
});
<div {{action 'refresh' target="view"}}><b>{{view.content.name}}</b></div>
You can specify a controller for view on its init event.
App.TeacherView = Ember.View.extend({
templateName: 'teacher-view',
setup:function() {
this.set('controller', App.Teacher.create());
}.on('init')
});
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#/
I am trying to feed fixture data to both a handlebars template and a nested view. With my current setup, the data reaches my handlebars template just fine, but not the view. I suspect I am missing some basic piece of the ember.js puzzle. Would someone please advise me?
I've asked a question about a setup that is similar but uses ajax instead of fixture data, but have further simplified my setup in the hopes of getting some direction.
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/leaflet.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
{{view App.MapView id="map" contentBinding="this"}}
<div id="blog">
<ul>
{{#each}}
<li>{{title}}</li>
{{/each}}
</ul>
</div>
</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.5.0.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/libs/leaflet-src.js"></script>
<script src="js/app.js"></script>
</body>
</html>
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.Router.map(function() {
this.resource('index', { path: '/' });
});
App.IndexRoute = Ember.Route.extend({
model: function () {
return this.store.find('storyPrev');
}
});
App.StoryPrev = DS.Model.extend({
title: DS.attr('string')
});
App.StoryPrev.FIXTURES = [
{
id: 1,
title: 'You Better Believe This!',
coordinates: [-73.989321, 40.6778]
},
{
id: 2,
title: 'Holy Crap, Unreal!',
coordinates: [-73.989321, 40.6779]
},
{
id: 3,
title: 'Big Bucks Made E-Z!',
coordinates: [-73.989321, 40.6780]
}
];
App.MapView = Ember.View.extend({
didInsertElement: function () {
var map = L.map('map', {zoomControl: false}).setView([40.685259, -73.977664], 14);
L.tileLayer('http://{s}.tile.cloudmade.com/[redacted key]/[redacted id]/256/{z}/{x}/{y}.png').addTo(map);
L.marker([40.685259, -73.977664]).addTo(map);
console.log(this.get('content'));
//THIS IS WHERE I GET STUCK
}
});
The view is backed by a controller, so you would do this.get('controller') to get the controller which is backed by your collection which if you wanted to get the collection (which isn't necessary since you can iterate the controller) you could do this.get('controller.model').
var controller = this.get('controller');
controller.forEach(function(item){
console.log(item.get('title'));
});
http://emberjs.jsbin.com/OxIDiVU/373/edit
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.
//index.html
<html>
<head>
<title>An Ember dice roller</title>
</head>
<body>
<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/app.js"></script>
<script type="text/x-handlebars" >
<h1>Dice Roller</h1>
{{#link-to 'roll'}}Click here{{/link-to}}
{{#link-to 'index'}}Go to index{{/link-to}}
{{outlet}}
</script>
<script type="text/x-handlebars" id="roll">
Hi!
</script>
<script type="text/x-handlebars" id="index">
<p>
Our content goes here
</p>
</script>
</body>
</html>
//app.js
var Roller = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_BINDINGS: true,
LOG_VIEW_LOOKUPS: true,
LOG_STACKTRACE_ON_DEPRECATION: true,
LOG_VERSION: true,
debugMode: true
});
Roller.Router.map(function () {
this.resource('index');
this.resource('roll');
});
What is wrong with this code?
I am getting the following error. My index.html page doesn't load anything.
I am beginner for ember.js.Can anyone please help me?
Assertion failed: The URL '/' did match any routes in your application
By default ember create something like this:
Roller.Router.map(function () {
this.route('index', { path: '/' });
});
But your router is overriding the index route with this:
this.resource('index');
So to be able to render the index template you will need to access your app with http://yourhost/#/index intead of http://yourhost/.
If you update your router mapping, and remove the this.resource('index') all will works:
Roller.Router.map(function () {
this.resource('roll');
});
This is a updated jsbin with this working http://jsbin.com/ucanam/1499/edit