javascript - Backbone.js 客户端模型在服务器端错误时保存问题

Question

想知道是否有人可以帮助我。

我在客户端有一个运行 backbone.js 的页面

服务器正在运行 socket.io。

我已经用 backbone.iobind 同步替换了 Backbones 默认同步以支持 socket.io。

我有一个主干模型，它在保存时从服务器获得错误响应(这是计划的)，并触发保存的错误函数，但是我在客户端的模型仍然更新为新值。我已经包含了 wait:true ，根据我的理解，它在更新之前等待服务器的成功响应，但这对我来说并没有发生。

服务器端 socket.io 代码

io.sockets.on('connection', function (socket) {
  socket.on('test:create', function (data, callback) {
    //err - used to fake an error for testing purposes
    var err = true;
    if (err) {
      // error
      callback('serv error');
    } else {
      // success
      // The callback accepts two parameters: error and model. If no error has occurred, send null for error.
      callback(null, data);
    }
  });

客户端代码

  //HTML Code
  //<div id="callBtns">
    //<button id="runTest">Create</button>
  //</div>


  var CommunicationType = Backbone.Model.extend({
    defaults: {
      runTest: 'default'
    },
    urlRoot : '/test',
    validate: function(attrs) {
            //return 'error';    
    }
  }); 

  var BasicView = Backbone.View.extend({    
    el: $('#callBtns'), 

    initialize: function(){
      _.bindAll(this); 
    },

    events: {
    "click #runTest": "runTestFn"
    },

    runTestFn: function() {

      //causing the issue?
      communicationType.set({runTest: 'value from set'});     

      communicationType.save({},{
        success:function(model, serverResponse){
          console.log('Success');
          console.log(serverResponse);
        },
        error:function(model, serverResponse){
          console.log('Error');
          console.log(serverResponse);
          console.log(JSON.stringify(communicationType));
        },
        wait: true
      });
    }

  });

  var communicationType = new CommunicationType(); 
  var basicView = new BasicView();

我注意到这个问题看起来是因为我使用 set 直接更新我的模型 (communicationType.set({runTest: 'value from set' });)

如果我在保存之前没有设置任何值，而是直接将值传递给保存，就像下面的代码一样，它可以正常工作，例如

communicationType.save({runTest: 'value from save'},{
            success:function(....

然而，这意味着如果不通过保存功能，我将无法设置任何新值/更新我的模型:/

所以我的问题是，我怎样才能让它正常工作(如果出现服务器端错误，让客户端模型不更新)同时仍然能够使用 set？

非常感谢任何答案!非常感谢

Answer 1

这无法完成，因为在发出请求(在本例中为 model.save)之前，您的模型无法知道其数据是否有效。

如果您想在传递无效值时阻止 Backbone.Model.set 工作，则必须更新模型的“验证”函数以检查错误。

给定以下验证函数:

validate: function(attrs) {
    this.errors = [];
    if (attrs.runTest === 'wrong_value') {
      this.errors.push('error message');
    }
    return _.any(this.errors) ? this.errors : null;
}

在您的 CommunicationType 模型上。在 BasicView 中运行这段代码:

communicationType.set({runTest: 'wrong_value'});

不会改变模型。

您还可以使用验证函数通过返回错误数组并检查它来检查服务器端错误:

validate: function(attrs) {
    this.errors = [];
    if (attrs.runTest === 'wrong_value') { // client side check
      this.errors.push('error message');
    }
    if (attrs.errors && attrs.errors.length > 0) { // server side check
        for (var key in attrs.errors) {
            this.errors.push(attrs.errors[key]);
        }
    }
    return _.any(this.errors) ? this.errors : null;
}

但这只会防止在保存时更改模型。

作为 hack-ish 的替代方案，您可以在验证函数中添加服务器请求以检查错误并防止“设置”函数更改模型。