backbone form validation, #9

moko365 · May 29, 2016 · 953fade · 953fade
1 parent 1977315
commit 953fade
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/public/index.js b/public/index.js
@@ -130,18 +130,28 @@ app.UserView = Backbone.View.extend({
     this.listenTo(this.model, 'sync', this.render);
     this.listenTo(this.model, 'change', this.render);
 
+    this.listenTo(this.modelPost, 'sync', this.renderPost);
+    this.listenTo(this.modelPost, 'change', this.renderPost);
+
     this.model.set('id', id);
     this.model.fetch();
   },
   deinitialize: function() {
-    console.log('deinitialized');
     this.$el = {};
     delete this.model;
   },
   render: function() {
     this.$el.html(this.template( this.model.attributes ));
     return this;
   },
+  renderPost: function() {
+    // 合併二個 model
+    var model = this.model.attributes;
+    _.extend(model, this.modelPost.attributes)
+
+    this.$el.html(this.template( model ));
+    return this;
+  },  
   edit: function(e) {
     this.$el.find('.non-editable').addClass('hide');
     this.$el.find('.editable').removeClass('hide');
@@ -156,7 +166,8 @@ app.UserView = Backbone.View.extend({
       }
     });
   },
-  savePost: function() {
+  savePost: function(e) {
+    e.preventDefault();
     this.modelPost.save({
       uid: this.$el.find('[name=id]').val(),
       title: this.$el.find('[name=title]').val(),

diff --git a/routes/api.js b/routes/api.js
@@ -129,6 +129,25 @@ exports.createPost = function(req, res){
   var uid = req.body.uid;
   var title = req.body.title;
   var content = req.body.content;
+  var outcome = {
+    errors: [],
+    errfor: {},
+    title: title,
+    content: content
+  };
+
+  if (!title) {
+	outcome.errfor.title = '請填寫 Title 欄位';
+	outcome.errors.push('Title 是必填欄位');
+  } 
+
+  if (!content) {
+	outcome.errfor.content = '請填寫 Content 欄位';
+	outcome.errors.push('Content 是必填欄位');
+  } 
+
+  if (outcome.errors.length > 0)
+  	return res.json(outcome);
 
   var post = {
     uid: uid,

diff --git a/views/index.jade b/views/index.jade
@@ -42,16 +42,20 @@ block content
       .row
         hr
         form
-          div.alerts
-          div.control-group(class!='<%= errfor.title ? "error" : "" %>')
+          <% _.each(errors, function(err) { %>
+          div.alert.alert-danger
+            <%= err %>
+          <% }); %>
+
+          div.form-group(class!='<%= errfor.title ? "has-error" : "" %>')
             label.control-label Title:
             div.controls
               input.form-control(type='text', name='title', value='')
-          div.control-group(class!='<%= errfor.content ? "error" : "" %>')
+          div.form-group(class!='<%= errfor.content ? "has-error" : "" %>')
             label.control-label Content:
             div.controls
               input.form-control(type='text', name='content', value='')     
-          input(type='hidden', name='id', value!='<%= user._id %>')
+          input(type='hidden', name='id', value='<%= user._id %>')
           button.btn.btn-primary.pull-left.btn-post-submit Submit Message                 
     div.well.editable.hide(style='margin-top: 50px;')
       .row