如何在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

一种方法是包装m.request另一个函数,它返回完成状态(基于你通过m.request promise链设置的标志)和数据,然后使用该background: true选项来阻止重绘的延迟,以及绑定m.redraw到promise链,以便在请求之后重新绘制.

这最初在这里描述:https://github.com/lhorie/mithril.js/issues/192

var requestWithFeedback = function(args) {
  var completed = m.prop(false)
  var complete = function(value) {
    completed(true)
    return value
  }
  args.background = true
  return {
    data: m.request(args).then(complete, complete).then(function(value) {
      m.redraw()
      return value
    }),
    ready: completed
  }
}

var MyController = function() {
  this.things = requestWithFeedback({method: "GET", url: "/things"})
}
var myView = function(ctrl) {
  return !ctrl.things.ready() ? m("img[src=loading.gif]") : m("ul", [
    ctrl.things.data().map(function(thing) {
      return m("li", thing.name)
    })
  ]) 
}

m.module(document.body, {controller: MyController, view: myView})