public
Last active

ember: clicking html elements

  • Download Gist
1.js
JavaScript
1 2 3 4 5 6 7 8 9 10
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
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13
<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
JavaScript
1 2 3 4 5 6 7 8
EmberCloneMail.EmailPreview = Em.View.extend({
tagName: "li"
templateName: "email-preview",
 
click: function(e){
// handle the view click here
}
});
4.html
HTML
1 2 3 4 5 6 7 8 9
<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
JavaScript
1 2 3 4 5 6 7 8
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
JavaScript
1 2 3
EmberCloneMail.EmailPreview = Em.View.extend(Ember.TargetActionSupport, {
// tag, template, etc here
});
7.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<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
JavaScript
1 2 3 4 5 6 7 8 9 10
EmberCloneMail.EmailPreview = Em.View.extend(Ember.TargetActionSupport, {
// tag, template, etc her
 
click: function(e){
 
// call the targeted controller / action
this.triggerAction();
 
}
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.