0

エンドポイントのポーリングを介してモデルが更新されたときに、変更イベントを発生させるのに問題があります。これは、コレクションが実際に更新されていないためだと確信しています。コレクションを完全にリセットするのではなく、インテリジェントに更新しようとする Backbone 0.9.9の新しいオプション( )を使用しています。update: true

関数console.log(this)の最後にa を挿入すると、が呼び出されたときに が更新されていないように見えます。ただし、エンドポイントがポーリングされており、エンドポイントがクライアントに対して新しい異なる値を返していることがわかります。updateClientCollectionthis.clientCollectionupdateClientCollectionsetInterval

managementApp.ClientListView = Backbone.View.extend({
  className: 'management-client-list',
  template: _.template( $('#client-list-template').text() ),

  initialize: function() {
    _.bindAll( this );
    this.jobId = this.options.jobId
    //the view owns the client collection because there are many client lists on a page
    this.clientCollection = new GH.Models.ClientStatusCollection();
    this.clientCollection.on( 'reset', this.addAllClients );
    //using the initial reset event to trigger this view's rendering
    this.clientCollection.fetch({
      data: {'job': this.jobId}
    });
    //start polling client status endpoint every 60s
    this.intervalId = setInterval( this.updateClientCollection.bind(this), 60000 );
  },

  updateClientCollection: function() {
    //don't want to fire a reset as we don't need new view, just to rerender
    //with updated info
    this.clientCollection.fetch({
      data: {'job': this.jobId},
      update: true,
      reset: false
    });
  },

  render: function() {
      this.$el.html( this.template() );
      return this;
  },

  addOneClient: function( client ) {
    var view = new managementApp.ClientView({model: client});
    this.$el.find( 'ul.client-list' ).append( view.render().el );
  },

  addAllClients: function() {
    if (this.clientCollection.length === 0) {
      this.$el.find( 'ul.client-list' ).append( 'No clients registered' );
      return;
    } 
    this.$el.find( 'ul.client-list' ).empty();
    this.clientCollection.each( this.addOneClient, this );
  }
});

managementApp.ClientView = Backbone.View.extend({
  tagName: 'li',
  className: 'management-client-item',
  template: _.template( $('#client-item-template').text() ),

  initialize: function() {
    _.bindAll( this );
    this.model.on( 'change', this.render );
  },

  render: function() {
    this.$el.html( this.template( this.model.toJSON() ) );
    return this;
  }
});
4

1 に答える 1

0

あなたのコードから収集できるものから、あなたはresetコレクションのイベントにのみバインドしています。

ドキュメントによると、フェッチ オプションの一部として渡すと、フェッチ後Backbone.Collectionにメソッドが使用されます。.update(){ update: true }

Backbone.Collection.update()関連するadd、changeおよびremove各モデルのイベントを発生させます。これらにもバインドし、関連する関数を実行して UI を更新する必要があります。

あなたの場合、既存のaddOneClientメソッドをaddコレクションのイベントにバインドできます。

クラスでは、およびイベントにClientViewバインドして、ビューをそれぞれ再レンダリングおよび削除できます。オブジェクト自体がイベントを簡単にクリーンアップできるように、忘れずに使用してください。changeremovelistenTo()ClientViewremove()

于 2012-12-20T02:18:02.280 に答える