0

我正在使用带有tastepie适配器和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'，按下按钮.

你知道为什么吗？

4

1 回答 1

1

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

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

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

见第 53 节和

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

第 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 文档的。特别是这些行：

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

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

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

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

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

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

于 2012-12-29T12:06:57.443 回答