2016-05-24 6 views
0

私は、バックボーンを備えたクラウドWebアプリケーションを作成しています。私はリソース(PUT)を更新する機能を書いています。私はこれを達成するために、サーバーからモデルプロパティを取得し(SubscriberViewを参照)、リソースを正常にフェッチしてSubscriberEditViewをインスタンス化し、新しくフェッチされたモデルが渡されるようにしています。 これまでのところ、これは期待通りに機能します。 SubscriberEditViewは、モデルインスタンスのプロパティが設定されたHTMLフォームをレンダリングします。 フォームに新しいログイン値を入力すると、サーバーリソースへのPUT要求を正常に作成し、期待通りにモデルインスタンスを更新する更新機能を起動できます。 しかし問題は、別のモデルインスタンスでこのプロセスを繰り返すと、キューモデルと以前にインスタンス化されたモデルに対してPUT要求が行われるということです。 なぜSubscriberEditViewのインスタンスが2つあるためですか?それとも、私が逃したか誤解したことですか?バックボーンズの保存メソッドがすべてのモデルを更新しようとしないようにするにはどうすればよいですか?

下記のコードを参照してください。

// The view for a single subscriber 
 
var SubscriberView = Backbone.View.extend({ 
 
\t tagName: 'tr', 
 
\t template: _.template($('#subscribers-tmpl').html()), 
 
\t initialize: function() { 
 
\t \t this.listenTo(this.model, 'destroy', this.remove); 
 
\t }, 
 
\t render: function() { \t \t 
 
\t \t var html = this.template(this.model.toJSON()); 
 
\t \t this.$el.html(html); 
 
\t \t return this; 
 
\t }, 
 
    events: { 
 
     'click .remove': 'onRemove', 
 
     'click .edit-subscriber': 'editSubscriber', 
 
    }, 
 
    editSubscriber: function() { \t 
 
    \t var getSubscriberModel = this.model.set('id', this.model.attributes.id, {silent:true}) 
 
    \t getSubscriberModel.fetch({ 
 
    \t \t success: function (model, response) { 
 
    \t \t \t $('#addSubscriber').fadeOut(); 
 
    \t \t \t new SubscriberEditView({model:model}); \t \t \t 
 
    \t \t }, 
 
    \t \t error: function (response) { 
 
    \t \t \t console.log('There was an error'); 
 
    \t \t } 
 
    \t }); 
 
    }, 
 
    onRemove: function() { 
 
     this.model.destroy(); 
 
    }  
 
}); 
 

 
// The edit view 
 
var SubscriberEditView = Backbone.View.extend({ 
 
\t tagName: 'div', 
 
\t el: '#updateSubscriber', 
 
\t template: _.template($('#subscriberEdit-tmpl').html()), 
 
\t initialize: function() { 
 
\t \t this.model.on('sync', this.render, this); 
 
\t }, 
 
\t events: { 
 
\t \t 'click #close': 'cancel', 
 
\t \t 'click .save-subscriber': 'update' 
 
\t }, 
 
\t update: function() { 
 
\t \t var $login = this.$('#login'); 
 
\t \t this.model.save({ 
 
\t \t \t login: $login.val(), 
 
\t \t }, 
 
     { 
 
\t \t \t dataType: 'text', 
 
\t \t \t success: function (model, response, options) { 
 
\t \t \t \t console.log('success'); 
 
     
 
     }, 
 
\t \t \t error: function (model, response, options) { 
 
\t \t \t \t console.log('error'); 
 
     } 
 
     }); 
 
\t }, 
 
\t cancel: function() { 
 
\t \t $('#addSubscriber').fadeIn(); 
 
\t \t $('#editInner').fadeOut(); 
 
\t }, 
 
\t render: function() { 
 
\t \t var html = this.template(this.model.toJSON()); 
 
\t \t this.$el.html(html); 
 
\t }, \t 
 
});

誰でもいただければ幸いそのその後、助けることができれば。 乾杯。

+0

なぜ 'options.data = JSON.stringify(attrs); \t options.contentType = "application/json"; '? –

+0

var getSubscriberModel = this.model.set( 'id'、this.model.attributes.id、{silent:true}) 'のポイントは何ですか? –

+0

@T J oops ...目的はありません。私は事故でそこに残しました。 –

答えて

1

問題はel: '#updateSubscriber',です。すべてのビューインスタンスは、イベントが委任された同じ要素を指しています。したがって、.save-subscriberのいずれかをクリックすると、すべてのビューインスタンスの更新がトリガーされます。複数のインスタンスを持つビューにはelを指定しないでください。

+0

明白な間違いがありましたが、私が[el]を指定していない場合、DOM内でビューテンプレートがどのようにレンダリングされるのですか? –

+0

@ James_101 'El'を指定しない限り、バックボーンは各インスタンスの' el'として要素を作成します。この要素にテンプレートを追加してDOM –

+1

@TJに追加することができます。ご協力いただきありがとうございます。 –

関連する問題