Question

我正在使用backbone.js来了解我何时尝试提交表单。在这种情况下，我无法使用this。所以我希望使用参数将表单内容序列化为json。

我该怎么做？

window.UserView = Backbone.View.extend({
    el: 'body',
    model: new window.UserList,
    template: _.template($('#user-view-template').html()),
    events: { "submit form#newUser": "addItem" },
    initialize: function () {
        _.bindAll(this, 'render', 'update', 'addItem');
        this.model.bind('refresh', this.render);
        this.update();
    },
    render: function () {
        $("#listContainer").html(this.template({ users: this.model.toJSON() }));
        return this;
    },
    update: function () {
        this.model.fetch();
    },
    addItem: function (e) {
        e.preventDefault();
        var person_attrs = $(e.target).serializeObject();
        this.model.create(person_attrs, {
            success: function (saved_person, data) {
                if (data.Result == "Success") {
                    alert("success, new Id: " + data.Model.Id);
                }
                else {
                    //Need to remove the model from the collection
                    alert(data.Message);
                }
            },
            error: function (aborted_person, response) {
                alert("Server Error");
            }
        });
        return false;
    }
});

到目前为止，我已将表单序列化并发送到服务器。这是正确的方法吗？

我还有一些其他问题：

如果服务器返回错误，请删除或取消本地创建模型。
如果服务器结果为“成功”，我想将返回的ID分配给模型。
刷新视图。我认为在服务器返回后会调用事件refresh。

Answer 1

我有兴趣为什么你不能在你的功能中使用'this'。如果您在视图中注册了提交事件，则可能会显示如下内容：

events: {
  "submit form": "onSubmit"
},

将DOM事件连接到onSubmit函数。 onSubmit函数可能如下所示：

onSubmit: function(e) {
  e.preventDefault();
  var attrs = this.serialize();
  if (this.model.set(attrs)) {
    // Do something here.
  }
},

serialize: function() {
  return {
    message: $("textarea[name='message']").val()
  };
}

您可以在serialize方法中使用JQuery选择器来获取属性，然后在保存之前在模型中设置它们。如果需要，您也可以保存它。可能有更优雅的方式来获取表单数据，但这是我一直使用的技术。

来自.create的Backbone.js事件和序列化表单

1 个答案: