保存在主干中后丢失模型实例答案

【问题标题】：loosing model instance after saving in backbone保存在主干中后丢失模型实例
【发布时间】：2012-12-29 09:00:47
【问题描述】：

我使用 backbone 和 tastypie 适配器和 jquery 来与 DOM 交互。我在骨干中发现了一些我无法理解的东西。我试图简化这个问题的代码。

这是我的 app.js：

$(document).ready(function() {
    Point = Backbone.Model.extend({
        defaults:{
            lat:0,
            lng:0
        },
        urlRoot: '/api/v1/point' ,
        initialize: function(attributes){
            var that = this;
            $('#b1').bind('click',function() {
                that.set('lat',that.get('lat')+1);
            });
            $('#b2').bind('click',function() {
                that.save();
            });
            $('#b3').bind('click',function() {
                console.log(that.get('lat'));
            });
        }
    });

    point = new  Point ();

    //****

    $('#b1').click();
    $('#b2').click();
    $('#b3').click(); // >> 1

    $('#b1').click();
    $('#b2').click();
    $('#b3').click(); // >> 2

    //****
});

还有我的html：

<script src="/static/js/jquery.js"></script>
<script src="/static/js/backbone.js"></script>
<script src="/static/js/backbone-tastypie.js"></script>
<script src="/static/js/app.js"></script>

<button id="b1">b1</button>
<button id="b2">b2</button>
<button id="b3">b3</button>

如您所见，我正在调用单击代码中的按钮，控制台按预期记录“1”然后是“2”。

当我删除星号 (//*) 之间的代码并按下这些按钮“b1”、“b2”、“b3”、“b1”、“b2”、“ b3' 在浏览器中手动并在控制台中获得 '1' 和 '1'。

我等待来自服务器的响应 1 秒并在控制台中检查它，但应用程序的行为仍然相同：'1'、'2' 带有带有星号的代码和 '1'、'1'、带有按钮按下。

你知道为什么吗？

【问题讨论】：

标签： backbone.js tastypie

【解决方案1】：

我等待服务器响应 1 秒并在控制台中检查它，但是 [...]

手动更改模型（使用鼠标单击按钮）而不是以编程方式 (click()) 是这里的关键部分。

我假设您不会从服务器返回最终模型，因为 Backbone 会使用该数据更新您的模型。

请参阅section 53 和

if (options.wait) {
  if (attrs && !this._validate(attrs, options)) return false;
  current = _.clone(this.attributes);
}

section 55

options.success = function(resp, status, xhr) {
  done = true;
  var serverAttrs = model.parse(resp);
  if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
  if (!model.set(serverAttrs, options)) return false;
  if (success) success(model, resp, options);
};

Backbone.js documentation。尤其是这几行：

var serverAttrs = model.parse(resp);（从响应中解析模型数据）

if (!model.set(serverAttrs, options)) return false;（更新模型的属性）

当你的第一个代码（你click() 按钮的那个）运行时，它会增加你的模型属性并在服务器返回之前记录它。那是

注意：在第一个代码中第二次按下按钮 3 时使用 wait 选项或 setTimeout() 将等同于行为。

但是你想要的是从你的服务器返回一个有效的模型（在持久化之后）。

离题提示：你不应该在模型initializer 或constructor 中绑定你的模型和视图，因为这会使它们耦合得太紧并且它们不能互换。（对于这个问题，当然可以接受。；）

【讨论】：