Question

我无法获得表格上班。下面是带有事件处理的表单视图的片段，但是我无法看到getFormData在控制台中打印的表单数据。我不确定这是否是正确的表单处理方法，但只是尝试从网上读取内容。

define(['backbone', 'handlebars', 'jquery', 'events', 'models/article'], function(Backbone, Handlebars, $, Events, Article) {



var ArticleFormView = Backbone.View.extend({
  events: {
    "submit": "createArticle"
  },
  tagName: "form",
  id: "article-form",
  className: "articleform",
  initialize: function() {
    this.model = new Article();
    this.render();
  },
  render: function() {
    var template = $("#createarticletemplate").html();
    console.log("template=" + template);
    var compiled = Handlebars.compile(template);
    var html = compiled(this.model.attributes);//passed when we do new View()
    console.log("compiled template=" + template);
    this.$el.html(html);
    return this;
  },
  createArticle: function(e) {
    e.preventDefault();
    console.log("createArticle event happened" + $(this.el).parent().html());
    var data = this.getFormData( $(this.el).parent() );
    console.log(JSON.stringify(data));

   this.model.save(data, {
     success: function(model, response, options) {
     console.log("create article success");
     Events.trigger("router:navigate", "#");
   },
   error: function(model, response, options) {
     return console.log("create article failure:" + response.responseText);
   }
 });

  },
  //Auxiliar function
   getFormData: function(form) {
     console.log(form);
     var unindexed_array = form.serializeArray();
     console.log(unindexed_array.length);
     var indexed_array = {};

     $.map(unindexed_array, function(n, i){
       console.log("array:" + n);
            indexed_array[n['name']] = n['value'];
     });

     return indexed_array;
   },
}); //artifleformview

  return ArticleFormView;
});

routes / index.js的片段

exports.articles.createone = function(req, res) {
  console.log(req.body);
  //res.json(req.body);
  db.articles.insert(req.body);
}

article.js模型：

define(['backbone'], function(Backbone) {
  var Article = Backbone.Model.extend({
  url: "/article",
  idAttribute: "_id"
});
  return Article;
});

控制台日志：

createArticle event happened<form id="article-form" class="articleform"><label>title </label><input type="text" name="title"><p></p><label>body </label><input type="text" name="body"><p></p><label>category </label><input type="text" name="category"><p></p><input type="submit" value="create article"></form> articleform.js:27
[div.form, prevObject: m.fn.init[1], context: form#article-form.articleform, jquery: "1.11.1", constructor: function, selector: ""…]
 articleform.js:44
0 articleform.js:46
{} articleform.js:29
create article success articleform.js:33
index called on router

添加createArticle错误日志：

POST http://localhost:3000/article net::ERR_EMPTY_RESPONSE jquery.js:4
send jquery.js:4
m.extend.ajax jquery.js:4
e.ajax backbone.js:1
e.sync backbone.js:1
i.extend.sync backbone.js:1
i.extend.save backbone.js:1
Backbone.View.extend.createArticle articleform.js:33
m.event.dispatch jquery.js:3
r.handle

如果有人想要更多代码，请告诉我，我可以将所有代码放在这里，但是文件太多，所以如果需要，我会附上一些链接。

在控制台错误打印的日志上方认为文章持续存在。

此致

米滕。

Answer 1

看起来你需要更换

var data = this.getFormData( $(this.el).parent() );

带

var data = this.getFormData(this.$('form'));

或

var data = this.getFormData(this.$el.closest('form'));

用骨干表格发布数据

控制台日志：

1 个答案: