7

私は Backbone.js を学び始めており、このボイラープレートから始めて、ディスク上の静的ファイルから 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;
});
4

1 に答える 1

7

これが奇妙であることに同意します。まだ何が起こっているのか完全にはわかりませんが、ここに私が疑うものがあります...

Destroy()呼び出しが有効な JSON を返していません。

  • firebug、fiddler などを見ていると、destroy() の応答はどのようになりますか?
  • thatまた、削除クリック機能がいつトリガーされるのかにも興味があります。
  • destroy は false または jqXHR オブジェクトを返しますか?

バックボーンに少し切断があります（少なくとも私は最初はそうでした）。その件について呼び出しdestroy()またはフェッチ/保存する場合、呼び出しは非同期です。呼び出しの直後に削除イベントが発生し、コレクションが応答できます。しかし、ドキュメントをもう少し深く掘り下げると、別のイベントが起動され、削除の確認が行われます。

サーバーがモデルの削除を正常に確認した後、「同期」イベント

したがって、コレクションは、削除が成功したという前提で動作しています。確認済みの削除にコレクションを応答させたい場合は、イベントを探しますsync。

ここで 1 つの厄介な点が残ります。エラー ハンドラが起動しないのはなぜですか? コールバックは、削除の確認に応答するように設計されています。しかし、JS コール スタックは、返された応答を成功またはエラーとして解釈する方法を知らないに違いありません。AJAX の現実に出くわしたことでしょう。バックボーン、jquery、およびその他のフレームワークの束で、ajax エラー処理を混乱させる可能性があることを発見しました。Google の「jquery ajax error not called」を参照すると、エラー イベントがトリガーされないさまざまなシナリオが多数見つかります。

アップデート

コメントを行ったり来たりした後... 2つのことが起こっています。まず、モデルが「新しい」ものとして認識されます。これは、呼び出しがDestroy()サーバー リクエストを行わないことを意味します。その結果、成功/エラーは発生しません。このコミットを参照してください。

そうは言っても、モデルを新しいとは考えていないと思います（サーバーに永続化されていません）。2 つのうちのいずれかを行う必要があります。id モデルにORという名前のプロパティを含めて、モデル ID (guid私が想定) をモデルの ID にマップします。次の行をモデルに適用すると、マッピングが簡単になりますidAttribute: "guid"。idAttributeの詳細については、こちらを参照してください。

于 2012-05-15T03:24:37.417 に答える