javascript - Mithril JSでAJAXリクエストを待っている間にスピナーを表示するにはどうすればよいですか?

Question

プロジェクトで Mithril JS を使用していますが、Ajax ライフサイクルに接続する方法を正確に理解するのに苦労しています。たとえば、Ajax リクエストに時間がかかる場合は、スピナーを表示したいと思います。かなり基本的ですが、それがどのように起こるのか理解できないようです。

Ajax リクエストが探しているコンテンツと同じコンテナーをスピナーに使用したいと考えています。

これが私のセットアップです：

var Thing = function (data) {
  var p = m.prop;
  this.title = p(data.title);
  this.timestamp = p(moment.unix(data.timestamp));
}

Thing.list = function(options) {
  m.request({method: "GET", url: "/things.json", type: Thing, background: true});
};

MyApp.components.thingsList = {
  controller: function ThingListController() {
    this.things = m.prop([]);
    Thing.list().then(this.things).then(m.redraw);
  },

  view: function thingListView(ctrl) {
    return m('div#thing-tab', [
      m('ul#things', [
        ctrl.things().map(thingView)
      ])
    ]);
  }
};

function thingView(thing) {
  ...some view stuff...
}

思い通りに動作していますが、ajax ライフサイクルに接続する方法がわかりません。繰り返しますが、リクエストの開始時にスピナーを表示し、それを ajax リクエストの結果に置き換えたいだけです。

どんな助けでも大歓迎です！

ありがとう、

Answer 1

Mithril がモデルの更新時に UI 全体を (差分を使用して) 再レンダリングするという原則に基づいて、これを行うためのエレガントな方法を見つけました。次の例は、インライン更新を保存するためのものです。

AJAX を介して変更されているモデルの一部がある場合、モデルに一時的なフラグを設定します (それを分離したい場合は、ビューステート モデルで簡単に行うことができます)。フラグを削除し、m.redraw() を呼び出します。

function updateRecord(ctl,evt,row,idx,rcd) {
    rcd._action="save";
    apiSender({ method: "PATCH", url: apiUrl, data: dropFlags(rcd) }).then(done,fail).then(null,logObject);

    function done(rspdta) {
        delete rcd._action;
        m.redraw();
        };

    function fail(rspdta) {
        ajaxError(ctl,rspdta,"Update customer "+rcd.CustomerId+" ("+rcd.ContactName+")");
        rcd._action="edit";
        m.redraw();
        };
    }

モデル データから再構築されたビューで、フラグを条件付けします。

if     (rcd._action=="edit"   ) { con=crtListRecordView_Edit   (rcd,idx             ); }
else if(rcd._action=="save"   ) { con=crtListRecordView_Waiting(rcd,idx,"Saving"    ); }
else if(rcd._action=="delete" ) { con=crtListRecordView_Waiting(rcd,idx,"Deleting"  ); }
else if(rcd._action=="merge"  ) { con=crtListRecordView_Waiting(rcd,idx,"Merging"   ); }
else if(rcd._action=="refresh") { con=crtListRecordView_Waiting(rcd,idx,"Refreshing"); }
else                            { con=crtListRecordView_Normal (rcd,idx             ); }
return m("tr", con);

これにより、異なるレコードに対する複数の同時アクションと、ユーザーへの洗練された明確で目立たないフィードバックが可能になります。

外観は次のとおりです。

普通：

編集：

保存: