I am trying to display a list of images synchronously from urls using Ember.js
For a preliminary idea on how to start using Ember.js please refer to my earlier post
Ember.js – Binding a simple string of data
what we want to achieve ?
I have a set of images which I get from outside urls.
I will bind those images to the front end view (HTML) using ember.js.
The images are fetched synchronously.
Prerequisites
- We need to download files from – http://emberjs.com/
- We need 3 files from ember site
- ember-1.5.1.js
- handlebars-1.1.2.js
- jquery-1.10.2.js
How to set Up the example
- Please create a folder photos in main directory where you want to run the example. In my case it is (c:/wamp/www/photos)
- Create a file index.html under photos folder
- Create a subfolder js under photos. Create another subfolder libs under js(c:/wamp/www/photos/js/libs)
- Now save the 3 files ember-1.5.1.js,handlebars-1.1.2.js, jquery-1.10.2.js under js/libs
- Create a javascript file application.js under js folder (c:/wamp/www/photos/js/application.js)
- Create a javascript file router.js under js folder (c:/wamp/www/photos/js/router.js)
Now paste the following code inside index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js •Displaying images synchronously</title>
</head>
<body>
<section id="main">
<ul style="list-style-type:none;">
<!-- TODO: SHOW LIST OF IMAGES HERE -->
</ul>
</section>
<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>
<script src="js/router.js"></script>
</body>
</html>
We have created a bare bones html page with only the references to the necessary javascript files.
There is a placeholder of type list which will finally display all the images
Now paste the following code inside application.js
window.App = Ember.Application.create();
This would create a new ember application with namespace ‘App’
Now paste the following code inside router.js
App.Router.map(function(){
this.resource('photos', {path:'/'});
})
App.PhotosRoute = Ember.Route.extend({
model: function() {
return [{
title: "Tomster",
url: "http://emberjs.com/images/about/ember-productivity-sm.png"
}, {
title: "Eiffel Tower",
url: "http://emberjs.com/images/about/ember-structure-sm.png"
}];
}
});
- Maps ember to data-template-name = photos when user hits the root url(index.html)
- creates a new class PhotosRoute from Ember.Route class and binds the template to a model which has a list of images. Each image has a title and a url
Finally we have to add handlebar template tags to bind the view (HTML) to the model. So inside index.html, we wrap the body section element with handlebar template script tags
and add {{#each}} attribute to iterate over each list element, and also a {{bind-attr src=url}} tag to display the actual image url for each image
So index.html now looks like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js •Displaying images synchronously</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="photos">
<section id="main">
<ul id="todo-list" style="list-style-type:none;">
{{#each}}
<li>
<img {{bind-attr src=url}} />
</li>
{{/each}}
</ul>
</section>
</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>
<script src="js/router.js"></script>
</body>
</html>
Now you can look at the page. In my case it is
C:/wamp/www/photos/index.html
The page should look like the demo below:
Ember.js •Displaying images synchronously
****************************************************************
WebJukti 