在 nginx 反向代理上使用 mithril.js 做一些请求

Doing some requests using mithril.js on nginx reverse proxy

我是前端新人,业余时间正在研究mithril.js,我觉得很棒。刚才我正在阅读有关 m.request() 的内容,但有些东西我不明白。我放下了一个从服务器获取一些数据的组件,在它的 oninit 函数中填充一个变量。 view 中使用相同的变量来显示数据,但是一旦请求 returns,就不会呈现数据。这是代码:

const m = require("mithril");
import Stuff from './stuff.js';
var WelcomePage = {
  stufflist: [],
  oninit: function(vnode) {
    m.request({
      method: "GET",
      url: "wfd/stuff",
      data: {offset:0, limit:5}
    }).then((result) => {
      WelcomePage.stufflist = result;
    });
  },
  view: function(vnode) {
    return (
      <div>
        Welcome! Have your stuff :)
        <ul>
        {
          WelcomePage.stufflist.map(stuff => (
            <li>
              <Stuff stuff = {stuff}></Stuff>
            </li>
          ))
        }
        </ul>
      </div>
    );
  }
}
export default WelcomePage;

当然,请求以预期的内容结束,Stuff 组件工作正常。我错过了什么?

更新: 我忘了说这个 mithril 页面在我配置的反向代理后面。就我从代理移动而言,该页面可以正常工作,因此可能存在错误。这是我的 dockerized nginx:alpine default.conf 文件:

server {
  listen       80;
  server_name  stuff.dev;

  #charset koi8-r;
  #access_log  /var/log/nginx/host.access.log  main;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
  }

  location /wfd {
    proxy_pass http://localhost:8080/;
  }
}

因为您可能只想更新组件的一个实例而不是

WelcomePage.stufflist = result;

你可能想要

vnode.state.stufflist = result;

然后在你看来使用

vnode.state.stufflist.map(...)

注意:只要不使用箭头函数,就可以使用 this 代替 vnode.state

嗯.. 问题是 WelcomePage 组件在主 .js 文件中呈现。作为 mithril.js 文档 states,如果您希望您的组件受益于 auto-redraw 系统,您必须安装它。所以,安装我的 WelcomePage 解决了我的 'problem'.