Skip to content

Instantly share code, notes, and snippets.

@SeaBassTian
Forked from alexbeletsky/Feedback.js
Last active August 29, 2015 14:17
Show Gist options
  • Save SeaBassTian/d87aac2eeaef50709a3f to your computer and use it in GitHub Desktop.
Save SeaBassTian/d87aac2eeaef50709a3f to your computer and use it in GitHub Desktop.
var Feedback = Backbone.Model.extend({
url: '/feedback',
defaults: {
'email': '',
'website': '',
'feedback': ''
},
validate: function (attrs) {
var errors = [];
if (!attrs.email) {
errors.push({name: 'email', message: 'Please fill email field.'});
}
if (!attrs.feedback) {
errors.push({name: 'feedback', message: 'Please fill feedback field.'});
}
return errors.length > 0 ? errors : false;
}
});
$(function () {
var model = new Feedback();
var view = new FeedbackFormView ({model: model});
$('#app').html(view.render().el);
});
var FeedbackFormView = Backbone.View.extend({
className: 'row',
template: '\
<form>\
<legend>Share the feedback</legend>\
<div class="control-group email">\
<label>Email</label>\
<input type="text" id="email" placeholder="Your email address...">\
<span class="help-inline"></span>\
</div>\
<div class="control-group website">\
<label>Web site</label>\
<input type="text" id="website" placeholder="Your website...">\
<span class="help-inline"></span>\
</div>\
<div class="control-group feedback">\
<label>Feedback</label>\
<textarea id="feedback" class="input-xxlarge" placeholder="Feedback text..." rows="6"></textarea>\
<span class="help-inline"></span>\
</div>\
<button type="submit" id="submit" class="btn">Submit</button>\
</form>\
',
events: {
'click #submit': 'submitClicked'
},
render: function () {
this.$el.html(this.template);
return this;
},
submitClicked: function (e) {
e.preventDefault();
var me = this;
var options = {
success: function () {
me.hideErrors();
},
error: function (model, errors) {
me.showErrors(errors);
}
};
var feedback = {
email: this.$('#email').val(),
website: this.$('#website').val(),
feedback: this.$('#feedback').val()
};
this.model.save(feedback, options);
},
showErrors: function(errors) {
_.each(errors, function (error) {
var controlGroup = this.$('.' + error.name);
controlGroup.addClass('error');
controlGroup.find('.help-inline').text(error.message);
}, this);
},
hideErrors: function () {
this.$('.control-group').removeClass('error');
this.$('.help-inline').text('');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment