javascript - 使用 Backbone.js 处理多部分设置面板的最佳方法是什么

Question

我有一个网络应用程序，它有一个设置面板，该面板有 5 个部分，每个部分有 1 到 3 个选项卡。就像:

• 个人资料:信息、密码、电话
• 社交媒体:Facebook、Twitter 等
• 账单:交易列表、充值等
• 等等

现在我已经通过创建一个 SettingsModel 并从服务器获取它的数据来处理这个问题。我使用 backbone-nested 插件制作了模型，因此我可以执行以下操作:birth.year 等。此外，我还使用 Backbone.ModelBinder 将模型实时绑定(bind)到 DOM，这样我就不必在每次更改时重新渲染或手动设置模型数据。

对于像电话号码这样的部分，我创建了一个 subview ，因为我无法使用 ModelBinder 处理这些部分，我必须手动执行，因为它们是嵌套的。

我的问题是:
有没有更好的方法来处理整个情况？因为现在我不知道如何处理保存过程(应该是自动的还是使用保存按钮或......)。我愿意使用 Backbone Relational 之类的东西，但我不知 Prop 体如何(逻辑上)。

有什么建议吗？

Answer 1

我没有使用过 backbone-nested 或 Backbone.ModelBinder 所以我不能 100% 确定它们的最佳方法。尽管如此，如果选项卡发生更改，这听起来仍然是处理保存的最佳方法。我假设 SettingsModel 被传递到每个选项卡 View ，因此每个 View 都可以在模型关闭并被删除之前触发模型上的事件(例如 save:changes)从 DOM 获取新 View 。在最简单的情况下，您只需要在模型中有一些监听器，以便该事件调用保存。如果您想在初始化程序中执行此操作，例如

#CoffeeScript
initialize: ->
  @on 'save:changes', @save

//JavaScript
initialize: function() {
  this.on('save:changes', this.save);
}

这会将整个模型发送回服务器。如果您的模型更大，并且您的 API 可以响应 PATCH 请求，并且您只想将更改发送到服务器，则可以使其更高级一些。

#CoffeeScript
initialize: ->
  @on 'save:changes', ->
    @save @changedAttributes(), patch: true

//JavaScript
initialize: function() {
  this.on('save:changes', function() {
    this.save(this.changedAttributes(), { patch: true });
  });
}

save 的文档关于补丁和changedAttributes (这被认为比 this.changed 使用起来更安全)。

我不建议从模型上的 change 或 change:#{attr} 事件执行 save ，因为它听起来就像Backbone.ModelBinder将根据数据绑定(bind)的方式触发许多更改事件。

如果这有帮助或者您还有其他问题，请告诉我。