【问题标题】:Backbone.js model's destroy method does not trigger success or error eventBackbone.js 模型的 destroy 方法不会触发成功或错误事件
【发布时间】:2012-05-14 21:08:48
【问题描述】:

我开始学习 Backbone.js,我从 this boilerplate 开始,并通过从磁盘上的静态文件加载 JSON 数据并将其显示在 html 表中来做了一个示例。

然后我尝试在按钮上绑定一个事件,该按钮应该从集合中删除一个元素,然后从 DOM 中删除。事情正常,点击触发destroy方法,在集合上触发remove事件,但successerrordestroy的回调没有任何结果

有人知道吗?

型号:

define([
  'underscore',
  'backbone'
], function(_, Backbone) {
  var memberModel = Backbone.Model.extend({
    url: "/members.json",
    defaults: {
      email: "",
      firstname: "",
      lastname: "",
      gender: "",
      language: "",
      consent: false,
      guid: "",
      creationDate: ""
    },
    initialize: function(){
    }

  });

  return memberModel;

});

观点:

define([
  'jquery',
  'underscore',
  'backbone',
  'mustache',
  'collections/members',
  'text!templates/members/page.html'
], function($, _, Backbone, Mustache, membersCollection, membersPageTemplate){
  var membersPage = Backbone.View.extend({
    el: '.page',
    initialize: function(){
        this.members = new membersCollection();

        this.members.on('remove', function(){
                // works fine
            $('.members-body tr').first().remove();
            console.log('removed from collection');
        });
    },

    render: function () {
        var that = this;

        this.members.fetch({success: function(){

            var wrappedMembers = {"members" : that.members.toJSON()};

            that.$el.html(Mustache.render(membersPageTemplate, wrappedMembers));

            $('#delete-member').click(function(){
                that.members.at(0).destroy({ 
                        // prints nothing!!!
                    success: function(){ console.log('sucess'); }, 
                    error: function(){ console.log('error'); }
                });

            });

        }});

    }
  });
  return membersPage;
});

【问题讨论】:

  • 您是否为您的模型或收藏集设置了url
  • 是的,url 在模型和集合上都设置了

标签: backbone.js requirejs mustache backbone-events js-amd


【解决方案1】:

我同意这很奇怪。我不完全确定发生了什么,但这是我怀疑的......

您的 Destroy() 调用未返回有效的 JSON。

  • 看着 firebug、fiddler 或其他什么,您的 destroy() 响应是什么样的?
  • 我也很好奇that 在你的删除点击功能被触发时是什么。
  • destroy 是返回 false 还是 jqXHR 对象?

主干线有点脱节(至少我一开始是为我服务的)。当调用destroy() 或获取/保存时,调用是异步的。调用后立即触发删除事件,您的集合可以响应。但是,在文档中深入挖掘,另一个事件被触发确认删除:

“同步”事件,服务器成功确认模型的删除

因此,您的集合是在删除成功的假设下进行的。如果您希望您的收藏响应确认的删除,请查找 sync 事件。

这留下了一个令人烦恼的问题——为什么你的错误处理程序没有触发?好吧,回调旨在响应删除的确认。但我敢打赌,JS 调用堆栈不知道如何将它返回的响应解释为成功或错误。您可能偶然发现了 AJAX 的现实。我在骨干网、jquery 和许多其他框架中发现,您可能会混淆 ajax 错误处理。谷歌“未调用 jquery ajax 错误”,您会发现许多未触发错误事件的不同场景。


更新

在 cmets 来回之后……发生了两件事。首先,您的模型被认为是“新的”,这意味着对Destroy() 的调用不会发出服务器请求。因此,您的成功/错误不会触发。见this commit

话虽如此,我不认为您认为您的模型是新的(未持久化到服务器上)。你需要做两件事之一。在您的模型映射中包含一个名为 id OR 的属性,您的模型 ID(我假设为 guid)到模型的 ID。通过将以下行应用于您的模型,映射很容易:idAttribute: "guid"。您可以在idAttribute here 上查看更多信息。

【讨论】:

  • 我正在 Google Chrome 中进行测试,当我查看“网络”选项卡时,当我调用 destroy 时它什么也没做。我还尝试了 Fiddler 来检查是否发送了 DELETE http 请求,但那里也没有发生任何事情。
  • 请将您的模型定义添加到原始帖子中(包括来自 fetch 的 JSON 响应)。另外,在删除之前that.members.at(0).IsNew 的值是什么?
  • 另外,this.members = new membersCollection; 这一行很奇怪。我希望直接分配,或者如果您在membersCollection() 之后使用new 括号
  • 我在destroy 调用之前添加了我的模型,that.members.at(0).IsNewundefined 我还在new membersCollection 之后添加了括号
  • @UsmanIsmail - 您只需要返回一个 HTTP 200。听起来您的请求可能会出错,但如果没有代码示例/设置就很难说。
猜你喜欢
  • 1970-01-01
  • 2013-08-18
  • 2012-05-15
  • 2020-01-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多