EmberJS Bootstrap Hello World UI Template

0

The article is a placeholder for Hello World code for EmberJS with Bootstrap. Those who want to get started with EmberJS can just copy and paste the code in an html file and get started. Among the scripts, you would also find the Bootstrap script and CSS files.

Following are, however, some of the observations to be noted:

  • Dependency on JQuery: The primary reason for dependency on JQuery as cited by the Ember code developer in this page is DOM manipulation.
  • Dependency on Handlebars template: This is the templating engine used by EmberJS.
  • EmberJS App Initialization: One needs to an Ember app initiated using the code such as “var app = Ember.Application.create();”

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>EmberJS - Hello World</title>
  <link rel="stylesheet" 	href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.jsdelivr.net/handlebarsjs/1.3.0/handlebars.min.js"></script>
  <script src="http://builds.emberjs.com/release/ember.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script>
    var app = Ember.Application.create();
  </script>
</head>
<body>
  <div class="container">
	<div class="page-header" style="margin: 0">
		<h1>Hello World</h1>
	</div>
  </div>
  <script type="text/x-handlebars">
    <div class="container">
    <form class="form-horizontal" role="form" method="post" action="#">
    <div class="form-group" style="padding-top:20px">
      <label class="col-md-1 control-label">Name:</label>
      <div class="col-md-2">
      {{input type="text" value=name placeholder="Enter your name"  class="form-control"}}
      </div>
    </div>
    <div class="col-md-3">
      <h3>Hello, {{name}}</h3>
    </div>
    </div>
    </form>
  </script>
</body>
</html>

[adsenseyu1]

Ajitesh Kumar
Share.

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.