I've been exploring Ember for several months and recently committed to a deeper investigation. After navigating through initial hurdles, I'm documenting the fundamentals to help others and reinforce my own comprehension.

New App

Ember requires two key dependencies: jQuery and handlebars.js. With dependencies included, you can establish your application. You may write either Ember or use the shorthand Em. Your application serves as a namespace for your entire Ember project:

App = Em.Application.create({});

Ember automatically generates an ApplicationView and ApplicationController. By default, it searches for a template named "application" or without a name.

Template

Ember's power emerges through template management capabilities. You can render templates via handlebars' {{ outlet }} (comparable to Ruby's yield) or the {{ view }} command.

App.HelloView = Em.View.extend({
  templateName: "hello"
});

Views

Regarding views, you can establish attributes and properties:

App.HelloView = Em.View.extend({
  templateName: "hello",
  message: "Hello World",
  classNames: ["bold"]
});

The div rendered by the Ember view will receive the class bold. To modify the element type the View renders, use tagName.

In the next post, I'll explore the router, controllers, and additional template concepts.