ember: clicking html elements

1.js

EmberCloneMail.EmailListView = Em.View.extend({
  tagName: "ul",
  classNames: ["email-list", "email-view"],
  templateName: "email-list-view"
});

EmberCloneMail.EmailPreview = Em.View.extend({
  tagName: "li"
  templateName: "email-preview"
});

2.html

<script data-template-name="email-list-view" type="text/x-handlebars">
  {{#each EmberCloneMail.emailListController}}
      {{view EmberCloneMail.EmailPreview contentBinding="this"}}
  {{/each}}
</script>

<script data-template-name="email-preview" type="text/x-handlebars">
  {{#with content}}
    <span class="from">{{from}}</span>
    <span class="subject">{{subject}}</span>
    <span class="date">{{date}}</span>
  {{/with}}
</script>

3.js

EmberCloneMail.EmailPreview = Em.View.extend({
  tagName: "li"
  templateName: "email-preview",

  click: function(e){
    // handle the view click here
  }
});

4.html

<script data-template-name="email-preview" type="text/x-handlebars">
  {{#with content}}

    <span class="from" {{action "doStuff" on="click"}}>{{from}}</span>

    <span class="subject">{{subject}}</span>
    <span class="date">{{date}}</span>
  {{/with}}
</script>

5.js

EmberCloneMail.EmailPreview = Em.View.extend({
  tagName: "li"
  templateName: "email-preview",

  doStuff: function(){
    // do stuff here, based on the click of the HTML element
  }
});

6.js

EmberCloneMail.EmailPreview = Em.View.extend(Ember.TargetActionSupport, {
  // tag, template, etc here
});

7.html

<script data-template-name="email-list-view" type="text/x-handlebars">
  {{#each EmberCloneMail.emailListController}}

      {{view EmberCloneMail.EmailPreview contentBinding="this" 

        target="EmberCloneMail.emailController" 
        action="showEmail"

      }}

  {{/each}}
</script>

<script data-template-name="email-preview" type="text/x-handlebars">
  {{#with content}}
    <span class="from">{{from}}</span>
    <span class="subject">{{subject}}</span>
    <span class="date">{{date}}</span>
  {{/with}}
</script>

8.js

EmberCloneMail.EmailPreview = Em.View.extend(Ember.TargetActionSupport, {
  // tag, template, etc her

  click: function(e){

    // call the targeted controller / action
    this.triggerAction();

  }
});