mithril.js - 如何将初始化数据发送到 Mithril 组件
问题描述
我正在尝试通过将 ID 设置为从服务器获取数据来初始化 Mithril 组件,如下所示:
// view/UserList.js
module.exports = {
oninit: function(vnode) {
console.log(vnode);
var groupId = vnode.attrs.groupId;
console.log('The group ID is '+groupId);
User.loadUsersInGroup(groupId);
},
view: ...
}
我有以下内容:
var userList = require('./view/UserList');
m.mount(document.body, UserList, {groupId: 5});
但我得到:
vnode.attrs is undefined
我试图将其更改为:
var UserList = require('./view/UserList');
m.mount(document.body, m(UserList, {groupId: 5}));
但现在我得到:
m.mount(element, component) expects a component, not a vnode
如何正确填充 vnode.attrs?
解决方案
将初始化数据发送到组件的正确方法可以在https://mithril.js.org/mount.html#description找到。
要在安装组件时传递参数,请使用:
m.mount(element, {view: function () {return m(Component, attrs)}})
因此应用于这种情况,它将是:
m.mount(document.body, {view: function() { return m(UserList, {groupId: 5}); }});
其他一些方法是:
const full = {view: vnode => m('h1', vnode.attrs.test)}
const short = {view: v => m('h1', v.attrs.test)}
const dest = {view: ({attrs}) => m('h1', attrs.test)}
const destf = {view: ({attrs: {test}}) => m('h1', test)}
m.mount(document.body, {
view: () => [
m(full, {test: "full"}),
m(short, {test: "short"}),
m(dest, {test: "destructured"}),
m(destf, {test: "fully destructured"})
]
})
在这里看到他们的行动。(由 Mithril.js Gitter 聊天中的 osban 提供)
推荐阅读
- unity3d - 屏幕空间 - Unity 中用于 VR 的叠加画布
- javascript - 是否可以使用自定义 YAML 样式而不是 truckonlytile png 图层来设计卡车特定的路标?
- c# - 实体框架是存储库吗
- powershell - 使用 while -or 运算符导致无限循环
- google-apps-script - Sheets插件中Google Scripts Time-Based Trigger的问题总是失败
- javascript - 循环内的 HTML 元素处理 - 使用 JS
- javascript - 如何在javascript Object.defineProperty 中定义数组的getter 函数?
- count - 包括切片机的Countrows
- windows - 使用 docker 发出正在运行的项目
- android - Android 警报对话框单元测试