javascript - backbone.stickit 和 html 表单 : How to save (patch) only changed attributes?

Question

tl;博士

如何将backbone.stickit与html表单一起使用来更改从服务器获取的现有模型，并且仅将更改的属性(由html表单中的用户输入更改)修补到服务器？

/tl;博士

我正在使用backbone.stickit在backbone.js应用程序中将模型绑定(bind)到作为主干 View 一部分的HTML表单。到目前为止，这工作得很好，但如果我要保存绑定(bind)模型，它就会变得有点复杂。这是因为我想使用 PATCH 方法并仅将更改的属性发送到服务器。我尝试说明到目前为止我所做的事情:

从服务器获取模型

user = new User(); //instatiate a new user-model
user.fetch(); //fetching the model from the server

console.log(user.changedAttributes()); // Returns ALL attributes, because model was empty

最后一行表明了我的问题，因为我认为我可以使用changedAtrributes()稍后的方法来获取需要在服务器上打补丁的属性。所以我尝试了这个解决方法，我发现了here

user.fetch({
    success: function (model, response, options) {
        model.set({});
    }
});

user.changedAtrributes(); //Returns now "false"

进行 Stickit 绑定(bind)

现在我渲染我的 View 并调用 stickit() View 上的方法，进行绑定(bind):

//Bindings specified in the view:
[...]
bindings: {
  "#username" : "username"
  "#age"      : "age"
}

[...]

//within the render method of the view
this.stickit();

绑定(bind)工作正常，我的用户模型得到更新，但是 changedAttributes()始终保持空白。

将模型保存到服务器

如果用户已进行所有必需的更改，则模型应保存到服务器。我想使用PATCH方法，只将更改的属性发送到服务器。

user.save(null, {patch:true}); //PATCH method is used but ALL attributes are sent to the server

或者

user.save(user.changedAttributes(),{patch : true}); 

使用第二种方法会产生不同的结果:

1. 如果我没有使用user.set({})解决方法，所有属性都已修补到服务器
2. 如果我使用user.set({})解决 changedAttributes() 的返回值为“false”并且所有属性都被 PUT 到服务器
3. 如果我调用 user.set("age","123")在调用save()之前，那么只有年龄属性被修补到服务器

所以结果 3 是我想要的行为，但是这有两个问题:首先，stickit 似乎没有使用 set()模型上的方法来更新属性(如果它们在 html 表单中发生更改)。其次，如果您调用set()使用一个属性，然后使用另一个属性， changedAttributes() 仅返回第二个属性.

也许我只是监督了backbone或backbone.stickit文档中的一些内容，所以我没有得到所需的行为。对此有什么想法吗？

Answer 1

注意:发现问题与backbone.stickit没有直接关系，更多的是与backbone本身相关。

我自己解决了这个问题，也许这可以帮助那些可能偶然发现这个问题的人:

Backbone 仅跟踪未更改的属性，而不跟踪未保存的属性。所以与

model.changedAttributes();

您只会获得自上次以来更改过的模型的属性

model.set("some_attribute","some_value")

最后我偶然发现了backbone.trackit这是由backbone.stickit的创建者维护的backbone.js插件。使用此插件，您可以跟踪未保存属性(自上次model.save()以来已更改的所有属性)，然后在模型的保存方法中使用它们。示例(我的用例):

Backbone.View.extend({
  bindings: {
    "#name" : "name",
    "#age"  : "age"
  },

  initialize: function () {
    this.model = new User();
    this.model.fetch({
      success: function (model, response, options) {
        //this tells backbone.stickit to track unsaved attributes
        model.startTracking(); 
      }
    });
  },

  render: function () {
    this.$el.html(tmpl);
    this.stickit();
    return this;
  },

  onSaveUserToServer: function () {
    //first argument: only unsaved attributes, second argument: tell backbone to PATCH
    this.model.save(this.model.unsavedAttributes(), { patch: true });
  });

});