I am trying to create a hello world program in ember js.
below is the code
<html>
<head>
<script src="libraries/jquery.js"></script>
<script src="libraries/handlebars.js"></script>
<script src="libraries/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars">
{{#view App.UserView }}
<b>Name:</b> {{person.name}}
{{/view}}
</script>
<button onclick="btnTest_OnClick()" id="btnTest">Click me to change</button>
<script type="text/javascript">
$(document).ready(function() {
window.App = Ember.Application.create();
//create class
App.Person = Ember.Object.extend({
id: 0,
name: ""
});
//create instance of class
var person = App.Person.create();
person.name = "Duncan";
person.id = 0;
//create controller
App.userController = Ember.Object.create({
content: person,
changeModel: function () {
this.content.set('name', 'Joe');
}
});
//view
App.UserView = Ember.View.extend({
nameBinding: 'App.userController.content.name'
});
});
function btnTest_OnClick() {
App.userController.changeModel();
}
</script>
</body>
</html>
it is not giving any error message but the name is not displayed on browser
could you please help me out??
You can't run emberjs like that. Move your app code to an app.js file and include that file. You don't need the document ready. Ember handles that for you.
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'm new with ember and i'm trying to do a websocket that receives JSON data from my golang Server in real time , The problem with my code is that it doesn't seem to be reading the adapter that i have created and so my socket doesn't connect to the server. I think that my code is missing something in application.js or index.html that will allow me to access to my adapter and use its methods!
this is my application.js:
App = Ember.Application.create({
LOG_TRANSITIONS: true
})
/******************************* Post Template **************************************/
//Define a route for the template "post"
App.Router.map(function() {
this.route("post", { path: "/post" });
});
App.PostsRoute = Ember.Route.extend({
model: function() {
return this.store.find("posts");
console.log(post);
}
})
//Post Model
App.Post = DS.Model.extend({
name: DS.attr('string'),
number: DS.attr('string')
});
/**************************** websocket mixin ************************************/
App.WebSocketHandler = Ember.Object.extend({
uri: 'ws://localhost:8081/',
//ws: undefined
initialize: function() {
// this.ws = new WebSocket(this.uri);
var ws = new WebSocket(uri);
// callbacks
this.ws.onopen = function() {
console.log('Connection established /all');
};
this.ws.onclone = function() {
console.log('Connection closed /' + 'all');
};
this.ws.onmessage = function(data) {
DS.get('defaultStore').load(App.Post, data); //Simply load your json in the store.
};
this._super();
}
});
/************************* websocket Adapter ********************************************/
DS.SocketAdapter = DS.RESTAdapter.extend({
socket: undefined,
init: function(){
this.socket = new App.WebSocketHandler();
this._super();
},
find: function (store, type, id) {
// empty block
console.log('find');
},
findAll: function (store, type) {
// empty block
console.log('findAll');
},
createRecord: function(store, type, record) {
// code not relevant
console.log('createRecord');
}
});
App.ApplicationAdapter = DS.SocketAdapter;
// Use the adapter in the store
App.Store = DS.Store.extend({
revision: 12,
adapter: 'SocketAdapter'
});
and my index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Ember.js Example Application</title>
<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.1.js"></script>
<script src="js/libs/Ember_Data.js"></script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
<script src="js/models/model.js"></script>
</head>
<body>
<h1>Bonjour </h1>
<script type="text/x-handlebars">
Hello, {{firstName}} {{lastName}}<br/>
<nav>
{{#link-to 'post'}}Post{{/link-to}}
</nav>
<div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>My Wrappers</h2>
<ul>
{{#each post in model}}
<li>{{post.number}}</li>
{{/each}}
</ul>
</script></p>
<script type="text/x-handlebars" data-template-name="post">
<ul>
{{#each post in model}}
<li>Wrapper Name: {{post.name}}</li>
<li>Wrapper Number: {{post.number}}</li>
{{/each}}
</ul>
</script>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
You have some errors in your code.
1) Ember Object uses its own create method.
this.socket = new App.WebSocketHandler();
// change to
this.socket = App.WebSocketHandler.create({});
2) Your route and route template was not correctly named to posts.
this.route("posts", { path: "/posts" });
http://emberjs.jsbin.com/qixur/1/edit
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
Somehow I don't understand how to implement views which require a certain controller with ember.js. I'll try to explain the issue in which I run with an example:
Let's say I would like to build a view component which creates a simple todo list: It contains a textfield. Underneath of that field is a list of all todo items that have been entered so far. That view should have a controller which stores the todo items (since I don't have to push to store them persistent at that point).
I'd like the view to be usable in different places of the webapp (through my handlebars templates), so it should be independent of the route through which it is accessed.
My templates look like this:
<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<script src="../shared/libs/jquery-1.9.1.js"></script>
<script src="../shared/libs/handlebars-1.0.0-rc.3.js"></script>
<script src="../shared/libs/ember-1.0.0-rc.1.js"></script>
<script src="todo.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
{{ view App.TodolistView }}
</script>
<script type="text/x-handlebars" data-template-name="todolistView">
{{view App.CreateTodoTextField
placeholder="Enter your todo here"
size=100
}}
<ul>
{{#each todo in controller}}
<li>{{todo}}</li>
{{/each}}
</ul>
</script>
</body>
</html>
My App Logic looks like this:
window.App = Ember.Application.create();
App.TodolistView = Ember.View.extend({
templateName: 'todolistView'
});
App.TodolistController = Ember.ArrayController.create({
content: [],
createItem: function(item) {
this.pushObject(item);
}
});
App.CreateTodoTextField = Ember.TextField.extend({
insertNewline: function() {
var value = this.get('value');
if (value) {
App.TodolistController.createItem(value);
this.set('value', '');
}
}
});
I have two problems with that code:
When my TodolistView tries to access the controller with
{{#each todo in controller}}
it actually accesses the ApplicationController, not the TodolistController
Also calling
App.TodolistController.createItem(value);
looks like a bad idea to me: I.e. what if I would have two TodoListViews on one page? createItem should be rather called on the current instance of the TodolistController...
Probably I'm missing a core concept for defining views with ember.js...
App.CreateTodoTextField = Ember.TextField.extend({
insertNewline: function() {
var value = this.get('value');
if (value) {
App.TodolistController.createItem(value);
this.set('value', '');
}
}
});
Todoliscontroller can't be accessed like this. Only its instance can be accessed in the below way:
var controller = this.get('controller');
controller.controllerFor('todolist').createItem(value);
Thanks for the hints, this is what, works for me, but I'm still not sure if this is the way its intended to be used:
HBS
<script type="text/x-handlebars" data-template-name="todolistView">
{{view App.CreateTodoTextField
placeholder="Enter your todo here"
size=100}}
<ul>
{{#each todo in controllers.todolist}}
<li>{{todo}}</li>
{{/each}}
</ul>
</script>
App.ApplicationController = Ember.Controller.extend({
needs: ['todolist']
});
JS
App.CreateTodoTextField = Ember.TextField.extend({
insertNewline: function() {
var value = this.get('value');
if (value) {
this.get('controller').get('controllers.todolist').createItem(value);
this.set('value', '');
}
}
});
I tried this very basic ember router example following the ember-router-example. But when I run it, it shows me an empty page. I checked the console window for any errors, but seems to be fine. Not really sure why this is not working and where am missing.
I am just trying to create the first level links of Home, Sections, items only.
Can somebody help me?
index.html:
<body>
<script src="js/libs/jquery-1.7.1.js"></script>
<script src="js/libs/jquery.lorem.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/app.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<div>
<ul>
<li><a {{action "doHome"}}>Home</a></li>
<li><a {{action "doSections"}}>Sections</a></li>
<li><a {{action "doItems"}}>Items</a></li>
</ul>
</div>
<div>
{{outlets}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="home">
<h1>yeah right Home</h1>
</script>
<script type="text/x-handlebars" data-template-name="sections">
<h1>Oh v in Sections index</h1>
</script>
<script type="text/x-handlebars" data-template-name="items">
<h1>correct in Items Index Page</h1>
</script>
</body>
app.js :
$(function() {
App = Ember.Application.create()
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName:'application'
});
App.HomeController = Ember.Controller.extend();
App.HomeView = Ember.View.extend({
templateName:'home'
});
App.SectionsController = Ember.Controller.extend();
App.SectionsView = Ember.View.extend({
templateName:'sections'
});
App.ItemsController = Ember.Controller.extend();
App.ItemsView = Ember.View.extend({
templateName:'items'
});
App.Route = Ember.Route.extend({
root: Ember.Route.extend({
doHome : function(router,event){
router.transitionTo('home');
},
doSections:function(router,event){
router.transitionTo('sections');
},
doitems:function(router,event){
router.transitionTo('items');
},
home : Ember.Route.extend({
route : '/',
connectOutlets:function(router,event){
router.get('applicationController').connectOutlet('home');
}
}),
sections : Ember.Route.extend({
route : '/sections',
connectOutlets:function(router,event){
router.get('applicationController').connectOutlet('sections');
}
}),
items : Ember.Route.extend({
route : '/items',
connectOutlets:function(router,event){
router.get('applicationController').connectOutlet('items');
}
})
})//root
}) //router
});
I created this fiddle with your code. It seems to be working, just use latest ember and handlebars. And maybe you should change {{outlets}} with {{outlet}}.
EDIT
The above fiddle is not working, see the updated fiddle.
I rewrote the routing code using the new routing API, now it is working as expected.
I believe you are supposed to be using "template" as opposed to templateName when you are defining your templates in your main html file. If you were to create those templates as separate handlebars files and use a build step, you would then use templateName to refer to them (by file name).
Steve