如何从主干中 model.save() 的成功回调触发视图事件？答案

【问题标题】：How do I trigger a view event from the success callback of model.save() in backbone?如何从主干中 model.save() 的成功回调触发视图事件？
【发布时间】：2013-05-10 18:10:40
【问题描述】：

我需要通知我网页的用户什么 model.save() 调用从服务器返回。

情况是这样的，点击触发视图中的getAnswer()，然后触发模型方法getAnswerServer()，该方法调用模型上的.save()，传递一个访问响应的成功回调。

但是我如何通知用户（通过使用视图事件或其他任何方式）响应是什么？

这是我的看法：

events: {"click button#active" : 'getAnswer'},

initialize: ...
render: ...

getAnswer: function() {

        this.model.getAnswerFromServer();
    },

型号：

getAnswerFromServer: function() {

   this.save({myAnswer1 : false}, {success: function(model, response) {

                answer = model.get('answer');

                if (answer === true) {
                    console.log("The answer is true! But how do I tell the user about it?");
                }
                else if (answer === false) {
                    console.log("The answer is false! But again, how do I tell this to my user?");
                }
            }});
}

理想情况下，我希望能够在这里调用事件处理程序并在不同的视图中触发事件，但我不知道如何从成功回调中访问它？实际上，即使为此视图触发自定义事件也足够了。

谢谢！

【问题讨论】：

标签： javascript backbone.js

【解决方案1】：

您始终可以在要显示的视图上使用sync event

选项 1

// The view that you would like to show

    initialize: function() {
          this.listenTo(this.model, 'sync', this.render);
    }

当正在保存的模型与服务器同步时会调用它。

但是如果你想要显示的视图不包含这个模型，那么你总是可以定义一个自定义事件处理程序并触发这是回调..

选项 2

var customEvents = _.extend({}, Backbone.Events);

this.save({
    myAnswer1: false
}, {
    success: function (model, response) {
        answer = model.get('answer');        
        customEvents.trigger('notifyAnswer', { isAnswer : answer });
    }
});

//在要显示的视图中

initialize: function() {
     this.listenTo(customEvents, 'notifyAnswer', this.notify);
},
notify: function(data) {
     if(data.isAnswer) {
          // Show something
     }
     else { 
         // show something else
     }
}

【讨论】：

【解决方案2】：

model.save 返回一个承诺。您可以在 getAnswer 方法中捕获它并触发事件或处理您的错误：

getAnswer: function() {
    var self = this;
    var p = this.model.save();

    p.done(function(data, status) {
       answer = self.model.get('answer');

       if (answer === true) {
           self.doTrueThing();
       }
       else if (answer === false) {
           self.doFalseThing();
       }
    });
    p.fail(function() {
       // failed :(
    });
},

【讨论】：

【解决方案3】：

你有没有理由不只是在做：

getAnswer: function() {
    this.model.save({myAnswer1 : false}, {success: function() {
            ...
            }.bind(this)});
},

在视图本身中，而不是使用模型中定义的函数？

然后，您可以将成功处理程序绑定到视图（使用.bind(this)，如上），然后将成功处理程序中的视图称为this。然后，您可以调用视图中定义的任何函数来更新视图，例如 this.updateMe()。

【讨论】：