仅提交 backbone 模型中更改的字段

Submit only changed fields in backbone model

我的应用程序中有非常复杂的表单,具有更新功能,用户可以只更改几个字段,单击“保存”按钮将数据提交到服务器。我的应用程序使用 backbone、syphon、JQuery 和 underscoreJs。

控制哪些字段可以发送到服务器的最佳方法是什么?仅使用这些库可以在我的应用程序中跨多个页面使用?诸如可重用功能之类的东西会有所帮助。

我试过 model.changedAttributes() 功能,但似乎没有按预期工作。大多数时候,它返回 false。我有以下代码,其中表单数据使用 siphon 进行序列化,然后将转换为我的应用程序特定格式以发送到 API.

formSave: function(e) {
    var data = changeToWriteApiFormat(Backbone.Syphon.serialize($(e.currentTarget).closest('form.event_form')[0]));
    this.model.clear();
    this.model.id = this.parentObj.model.id;

    this.model.set(data);

    if (this.model.isValid(true)) {
      this.model.save(removeObjIndexCollection(data), {
          url: this.model.url().replace(gc.readApiUrl, gc.publishApiUrl),
          patch: true,
          beforeSend: ToolsHelper.setPublishHeader,
          success: function(model, response) {
            $('#event_success').show();
            $('#event_failure').hide();
          },
          error: function(model, response) {
            $('#event_failure').show();
            $('#event_success').hide();
          }

        }
      }

model.changedAttributes() 仅当您之前在 this.model 上设置了一些属性时才有效,但是由于您通过 this.model.clear(); 清除了它们; 它会 return 错误。

此外,"save" 仅在验证 return 有效时才会执行,您不必额外调用 isValid。

"patch:true" 属性是正确的,但只有在您设置了以前的值时才会起作用。

试试这个:

formSave: function(e) {
    var data = changeToWriteApiFormat(Backbone.Syphon.serialize($(e.currentTarget).closest('form.event_form')[0]));

        this.parentObj.model.save(removeObjIndexCollection(data), {
           url: this.model.url().replace(gc.readApiUrl, gc.publishApiUrl),
           patch: true,
           beforeSend: ToolsHelper.setPublishHeader,
           success : function(model, response) {
               $('#event_success').show();
               $('#event_failure').hide();
           },
           error : function(model, response) {
               $('#event_failure').show();
               $('#event_success').hide();
           }

         }
}

编辑:这里是更改属性的示例:

var model = new Backbone.Model();

model.set({
    val1 : 'init',
    val2 : 'init'
});

// .. whatever

var newChangesFromForm = {
    val2 : "changed",
    val1 : 'init' // won't be set, because it's the same value
};
model.on('change', function() {
    var changes = model.changedAttributes();

    alert(JSON.stringify(changes));
});
model.set(newChangesFromForm);