Binding a Simple String of Data using Ember.js
In the following post I will bind a simple string (firstname and lastname) to HTML using ember.js.
My target is to show-
- What libraries to use for Ember.js
- How to familiarize oneself with ember.js
We will download files from emberjs.com
Basic features of ember.js
Ember.js is a javascript MVC framework.
It has 4 parts
- Model – stores the data
- Template – binds data from the model and displays to the user(HTML)
- Controller – gets input from template or model and updates the model or template respectively
- Router – routes the url to the respective template, also routes the model to the respective template
How To Start
Please go here – http://emberjs.com/
Click on ‘Download the Starter Kit’ and download ‘starter-kit-1.5.1.zip’
There are 3 js files we need starter-kit-1.5.1 -> js -> libs
- ember-1.5.1.js
- handlebars-1.1.2.js
- jquery-1.10.2.js
How to set up our application
Inside the main folder where you want to create the application (in my case it is c:/wamp/www)
- Create a new folder – Ember-Tutorial-1
- Create an index.html file inside it (c:/wamp/www/Ember-Tutorial-1/index.html)
- Create a js folder and then a libs folder under js folder (c:/wamp/www/Ember-Tutorial-1/js/libs)
- Save the 3 js files (ember-1.5.1.js,handlebars-1.1.2.js,jquery-1.10.2.js) under
js/libs (c:/wamp/www/Ember-Tutorial-1/js/libs)
Now paste the following code inside index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js Binding string of data</title>
<style>
div{
margin:200px 100px;
}
</style>
</head>
<body>
<div>
Hello, <strong>FirstName LastName</strong>!
</div>
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/application.js"></script>
</body>
</html>
We will bind ‘firstname’ and ‘lastname’ with actual values
Now create a javascript file application.js under js folder
(c:/wamp/www/Ember-Tutorial-1/js/application.js)
and paste the following code
// Test1 is the namespace for the application
window.Test1 = Ember.Application.create();
// defines class ApplicationController by extending
// ember ApplicationController class
Test1.ApplicationController = Ember.Controller.extend({
firstName: "Ujjaini",
lastName: "Mukherjee"
});
The application.js file –
- creates a namespace Test1 for the whole application
- creates a new class ApplicationController by extending Ember.Controller class
- This controller hardcodes firstname and lastname so that they can be bound to the HTML
- In normal cases , Controllers contain the application logic and will not contain data.
Data is contained in the model. But only for this example I have hardcoded these values
Now go to index.html
and inside body tags wrap the HTML code by using handlebar template tag.
Also, replace the FirstName and LastName using dynamic {{firstName}} and {{lastName}}
The code looks like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js Binding string of data</title>
<style>
div{
margin:200px 100px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<div>
Hello, <strong>{{firstName}} {{lastName}}</strong>!
</div>
</script>
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/application.js"></script>
</body>
</html>
Now check the page.In my case it is -C:/wamp/www/Ember-Tutorial-1/index.html
If everything runs correctly, you should be able to see
Hello Ujjaini Mukherjee
Please see the actual demo here–
Ember.js Binding string of data
Please Note: In this application I am only using template and controller. This is because we are only trying to display a string value. I am trying to get new users to familiarize themselves with ember.js. But for actual applications all 4 features – model, application, template and router needs to be used
WebJukti 