home
  • Blog
1.10
  • Getting Started
  • Getting Ember
  • Concepts
  • The Object Model
  • Application
  • Templates
  • Routing
  • Components
  • Controllers
  • Models
  • Views
    • Introduction
    • Defining a View
    • Handling Events
    • Inserting Views in Templates
    • Adding Layouts to Views
    • Customizing a View's Element
    • Built-in Views
    • Manually Managing View Hierarchy
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Cookbook
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.10.0.
Go to v5.0.0

Defining a View

Edit pencil

You can use Ember.View to render a Handlebars template and insert it into the DOM.

To tell the view which template to use, set its templateName property. For example, if I had a <script> tag like this:

<html>
  <head>
    <script type="text/x-handlebars" data-template-name="say-hello">
      Hello, <b>{{view.name}}</b>
    </script>
  </head>
</html>

I would set the templateName property to "say-hello".

var view = Ember.View.create({
  templateName: 'say-hello',
  name: "Bob"
});

Note: For the remainder of the guide, the templateName property will be omitted from most examples. You can assume that if we show a code sample that includes an Ember.View and a Handlebars template, the view has been configured to display that template via the templateName property.

You can append views to the document by calling appendTo:

view.appendTo('#container');

As a shorthand, you can append a view to the document body by calling append:

view.append();

To remove a view from the document, call remove:

view.remove();
left arrow
Introduction
Handling Events
right arrow
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue