EmberJS Tutorial: Understanding basic View and Events


duration-icon
Duration:
10 Mins

difficulty-icon
Difficulty:
Low

In this series of Ember Tutorial; till now, we’ve gone through the basic things you need to know before starting ember, my first ember app, and understanding controllers. Now it’s time to discuss about view, which is one of the very important parts of ember.

What is view?

View is the presentation part; where information is presented in a particular format. The user interaction with the app is also done in view. For better understanding you can imagine it as a div tag of html, which has some placeholders where we can show data dynamically. This imaginary div also can have its property (variables and methods). In ember, you can create your view object (one or many), you can display any of them according to your logic or route. Nested view is also one of the features of ember.

Defining and inserting a view?

There are two ways to define a view and insert it in the template. But in both the ways, you have to make an object of the Em.View (or Ember.View) class. Let’s see how to do that.

Way 1:

Javascript

App.SiteName = Em.View.extend({
  firstName: “Void”,
  lastName: "Canvas"
});

Html

{{#view App.SiteName}}
  <b>First Name:</b> {{view.firstName}}
  <br>
  <b>Last Name:</b> {{view.lastName}}
{{/view}}

To define a view, you have to create an object in your javascript by extending the Em.View (or Ember.View) class. Inside that, you can declare your variables and functions.

To insert that view in your template (html), you have to follow the write the handlebar script {{#view App.ViewName}} {{/view}}. Inside this you can play with the properties and methods of your view.

Way 2:

Javascript

App.Whatever = Ember.View.extend({
  templateName: “sitename”,
  firstName: “Void”,
  lastName: "Canvas"
});

Html

<script type="text/x-handlebars" data-template-name="sitename">
  <b>First Name:</b> {{view.firstName}}
  <br>
  <b>Last Name:</b> {{view.lastName}}
</script>

In way 2; the name of the view object is not needed while inserting in the template. But inside the object you must have another property called templateName; which should be initialized with the value same as data-template-name attribute in handlebar’s script tag, in your template.

Handling events

In controller we had to define the action functions in the object, and then we had to bind them in the template with different elements, according to different events. But ember’s view made it very easy to handle events and assign actions. Only by using naming conventions it binds the action to the according event. For an example:

Javascript

App.SiteName = Ember.View.extend({
    firstName: “Void”,
    lastName: Canvas,

    click: function(e){
       alert(“clicked”);
       // do something
    },
    mouseLeave: function(e){
       alert(“Mouse Left”);
       // do something
    },
    mouseEnter: function(e){
       alert(“Mouse Entered”);
       // do something
    }
});

Html

{{#view App.SiteName}}
{{view.firstName}} {{view.lastName}} .Com
{{/view}}

Different Events

Touch Mouse Keyboard Form Drag
touchStart mouseDown keyDown submit drag
touchEnd mouseUp keyUp change dragStart
touchMove contextMenu keyPress focusIn dragEnd
touchCancel click focusOut dragEnter
doubleClick input dragLeave
mouseMove drop

Few built in views

Ember provides few built in views also, like text inputs, check boxes, and select lists.

Ember.Checkbox:

<label>
  {{view Ember.Checkbox checkedBinding="model.isDone"}}
  {{model.title}}
</label>

Ember.TextField:

App.MyText = Ember.TextField.extend({
  formBlurred: null, // passed to the view helper as formBlurred=controllerPropertyName
  change: function(evt) {
    this.set('formBlurred', true);
  }
});

Ember.Select:

{{view Ember.Select viewName="select"
      contentBinding="people"
      optionLabelPath="model.fullName"
      optionValuePath="model.id"
      prompt="Pick a person:"
      selectionBinding="selectedPerson"
}}

Ember.TextArea:

var textArea = Ember.TextArea.create({
  valueBinding: 'TestObject.value'
});

Conclusion:

Hope this basic tutorial about ember’s view will give you enough idea to start using view. But view has a lot more things to know. It’s just the beginning. We will cover in depth tutorials in few weeks.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • helloct

    Great Tutorial!
    Waiting for the rest.