Skip to content
Browse files

introduced Ember.Link to clean up views; added crude validation logic…

… to model
  • Loading branch information...
1 parent 74354fc commit 7d28a03b600edbb491aa00356a2a7bc68602c74e @dgeb dgeb committed Jan 1, 2012
View
4 app/assets/javascripts/app/helpers/formatting.js
@@ -2,7 +2,3 @@ Handlebars.registerHelper('highlight', function(property) {
var value = Em.getPath(this, property);
return new Handlebars.SafeString('<span class="highlight">'+value+'</span>');
});
-
-Handlebars.registerHelper('link', function(text) {
- return new Handlebars.SafeString('<a href="#">'+text+'</a>');
-});
View
13 app/assets/javascripts/app/models/contact.js
@@ -8,5 +8,16 @@ App.Contact = DS.Model.extend({
fullName: Em.computed(function() {
return this.get('first_name') + ' ' + this.get('last_name');
- }).property('first_name', 'last_name')
+ }).property('first_name', 'last_name'),
});
+
+App.Contact.reopenClass({
+ // Let's do some crude validation here in which errors are returned as a string;
+ // successful validation returns true.
+ validateProperties: function(hash) {
+ if (hash.first_name === '' || hash.last_name === '')
+ return "Contacts require both a first and last name";
+ else
+ return true;
+ }
+});
View
8 app/assets/javascripts/app/templates/contacts/list.jst.hjs
@@ -15,10 +15,6 @@
</tbody>
</table>
<div class="commands">
- {{#view newView}}
- {{link "New Contact"}}
- {{/view}}
- {{#view refreshView}}
- {{link "Refresh Listing"}}
- {{/view}}
+ {{#view Ember.Link action="newRecord"}}New Contact{{/view}}
+ {{#view Ember.Link action="refreshListing"}}Refresh Listing{{/view}}
</div>
View
12 app/assets/javascripts/app/templates/contacts/show.jst.hjs
@@ -1,18 +1,14 @@
<td>{{contact.id}}</td>
<td>
{{#if isEditing}}
- {{view App.EditContactView contactBinding="contact" showViewBinding="this"}}
+ {{view App.EditContactView contactBinding="contact"}}
{{else}}
{{contact.fullName}}
{{/if}}
</td>
-<td>
+<td class="commands">
{{#unless isEditing}}
- {{#view editLink}}
- {{link "Edit"}}
- {{/view}}
- {{#view destroyLink}}
- {{link "Destroy"}}
- {{/view}}
+ {{#view Ember.Link action="startEditing"}}Edit{{/view}}
+ {{#view Ember.Link action="destroyRecord"}}Destroy{{/view}}
{{/unless}}
</td>
View
22 app/assets/javascripts/app/views/contacts/edit.js
@@ -5,13 +5,23 @@ App.EditContactView = Em.View.extend({
submit: function(evt) {
evt.preventDefault();
- var contact = this.get("contact");
- contact.set("first_name", this.$().find("#first_name").val());
- contact.set("last_name", this.$().find("#last_name").val());
- App.store.commit();
+ var data = {
+ first_name: this.$().find("#first_name").val(),
+ last_name: this.$().find("#last_name").val()
+ };
+ var valid = App.Contact.validateProperties(data);
- // hide edit form
- this.showView.stopEditing();
+ if (valid === true) {
+ var contact = this.get("contact");
+ contact.setProperties(data);
+ App.store.commit();
+
+ // hide form
+ this.get("parentView").stopEditing();
+ }
+ else {
+ alert(valid);
+ }
// prevent event from bubbling up
return false;
View
31 app/assets/javascripts/app/views/contacts/list.js
@@ -2,30 +2,11 @@ App.ListContactsView = Em.View.extend({
templateName: 'app/templates/contacts/list',
contactsBinding: 'App.contactsController',
- newView: Em.View.extend({
- tagName: 'span',
+ newRecord: function() {
+ this.set('showNew', true);
+ },
- click: function(evt) {
- evt.preventDefault();
-
- // show new contact form
- this.get("parentView").set('showNew', true);
-
- // prevent event from bubbling up
- return false;
- }
- }),
-
- refreshView: Em.View.extend({
- tagName: 'span',
-
- click: function(evt) {
- evt.preventDefault();
-
- App.contactsController.findAll();
-
- // prevent event from bubbling up
- return false;
- }
- })
+ refreshListing: function() {
+ App.contactsController.findAll();
+ }
});
View
18 app/assets/javascripts/app/views/contacts/new.js
@@ -5,14 +5,22 @@ App.NewContactView = Em.View.extend({
submit: function(evt) {
evt.preventDefault();
- var contact = App.store.create(App.Contact, {
+ var data = {
first_name: this.$().find("#first_name").val(),
last_name: this.$().find("#last_name").val()
- });
- App.store.commit();
+ };
+ var valid = App.Contact.validateProperties(data);
- // hide new contact form
- this.get("parentView").set('showNew', false);
+ if (valid === true) {
+ var contact = App.store.create(App.Contact, data);
+ App.store.commit();
+
+ // hide form
+ this.get("parentView").set('showNew', false);
+ }
+ else {
+ alert(valid);
+ }
// prevent event from bubbling up
return false;
View
42 app/assets/javascripts/app/views/contacts/show.js
@@ -3,6 +3,11 @@ App.ShowContactView = Em.View.extend({
classNames: ['show-contact'],
tagName: 'tr',
+ doubleClick: function(evt) {
+ this.startEditing();
+ return false;
+ },
+
startEditing: function() {
this.set('isEditing', true);
},
@@ -11,36 +16,9 @@ App.ShowContactView = Em.View.extend({
this.set('isEditing', false);
},
- doubleClick: function(evt) {
- this.startEditing();
- return false;
- },
-
- editLink: Em.View.extend({
- tagName: 'span',
-
- click: function(evt) {
- evt.preventDefault();
-
- this.get("parentView").startEditing();
-
- // prevent event from bubbling up
- return false;
- }
- }),
-
- destroyLink: Em.View.extend({
- tagName: 'span',
-
- click: function(evt) {
- evt.preventDefault();
-
- var contact = this.get("parentView").get("contact");
- contact.deleteModel();
- App.store.commit();
-
- // prevent event from bubbling up
- return false;
- }
- })
+ destroyRecord: function() {
+ var contact = this.get("contact");
+ contact.deleteModel();
+ App.store.commit();
+ }
});
View
1 app/assets/javascripts/application.js
@@ -7,6 +7,7 @@
//= require jquery
//= require jquery_ujs
//= require ember
+//= require ember_extensions
//= require ember_data
//= require ember_data_extensions
//= require app
View
15 app/assets/javascripts/ember_extensions.js
@@ -0,0 +1,15 @@
+Ember.Link = Ember.View.extend(Ember.TargetActionSupport, {
+ classNames: ['ember-link'],
+
+ tagName: 'a',
+ attributeBindings: ['href'],
+ href: '#',
+ target: 'parentView',
+ propagateEvents: false,
+
+ click: function(evt) {
+ evt.preventDefault();
+ this.triggerAction();
+ return Ember.get(this, 'propagateEvents');
+ }
+});
View
11 app/assets/stylesheets/contacts.css.scss
@@ -1,6 +1,13 @@
.commands {
- margin-top: 10px;
a {
- margin-right: 10px;
+ margin-right: 5px;
}
}
+
+td.commands {
+ padding-left: 5px;
+}
+
+div.commands {
+ margin-top: 10px;
+}

0 comments on commit 7d28a03

Please sign in to comment.
Something went wrong with that request. Please try again.