Backbone.js 使用主干表单post发布数据

我无法从邮局上班。下面是带有事件处理的表单视图的代码段，但我无法看到从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;
});

控制台日志： 如果有人想要更多的代码，让我知道我可以把所有的代码放在这里，但它太多的文件，所以最好是一些链接，我附加，如果需要的话

上面控制台中错误打印的日志认为文章已经很好了

问候,

---

Miten.

看起来您需要更换

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

与

或

---

最近的表单回复工作，但未调用模型success。如果未调用success，则应调用error，让调试器同时执行，并检查您得到的错误是什么，服务器上的一些事情可能是错误的，在相当长的延迟之后，错误函数确实被调用了，但是这篇文章已经很好地持久化了，因为如果我去列出文章，它就会显示出来。当你说DEBUG时，我只知道添加console.log。你是说node.js端有一些调试器，除了我通过监控app.js运行它之外。我已经在原始消息中添加了日志。然后它不是相关的主干视图，当我说debugger时，我指的是

debugger

语句，它将在此时停止javascript的执行。并让您分析参数和堆栈。如果调用了error，这是服务器端的问题（可能是node.js）。很抱歉，无法理解“Then's not related Backbone View”的意思。你是说文章形式不是主干视图？这个问题很让人困惑。“无法查看表单数据”。。。好的，在哪里？在用户键入的位置看不到它？看不到你的getFormData方法吗？无法看到它何时应发送到服务器？另外，它看起来像exports.articles.createOne代码段是nodejs代码吗？是 啊如果您突然在代码段之间切换平台，那么这肯定是一件有用的事情。向客户端返回响应的nodejs代码在哪里？最后，您发布了日志数据，但不清楚是什么实际写入了这些日志消息，因此它们不是非常有用。我理解，但不想在这里添加所有文件，因为我似乎在这里添加了所有内容。我不确定我是否可以在这里添加zip文件，如果可以，请让我知道，我可以添加它。基本上我展示了articleform.js，它是用来处理表单提交的，然后展示了我觉得相关的日志。你没有回答我的任何问题，没有一个问题需要发布zip文件，只是澄清。问题是，您的nodejs方法没有向客户端返回响应，因此服务调用最终会超时，并作为故障处理。我自己也理解这一点。首先，我没有调用Ravi帮助回答的getFormData。然后我看到表单提交一直保存文章，但是没有调用success。您指出createArticle（nodejs方法）没有返回任何响应。我的印象是success会被调用，它会将用户返回到索引页面，但似乎调用了error，并且并没有响应，正如您所指出的那个样。我会像你指出的那样检查一下。

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

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

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

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