Javascript 单击按钮时显示组件

我必须开发一个应用程序页面，我选择Mithril

我需要在单击按钮时渲染组件，这是我的代码：

var accountView = {
    controller: function (data) {
        return {
            showOtherPage: function () {
                ??? how to render an other component ?
            }
        }
    },
    view: function (ctrl) {
        return [
            m("button", { onclick: ctrl.showOtherPage }, "Account")
        ];
    }
}

---

提前感谢

如果您正在使用Mithril的路由功能，并且希望显示一个全新的页面，那么您可以使用链接而不是按钮。（就我个人而言，这是我通常预期处理这些场景的方式。）例如

小提琴：

（或者，如果由于某种原因链接不合适，也可以在

showOtherPage

函数中调用

m.route（“/otherPage”）

。）

或者，如果您没有使用Mithril的路由（例如，如果您使用的是

m.mount

），但仍然希望呈现整个新页面，那么您可能希望使用新视图调用

m.mount

。乙二醇

m.mount(document.body, otherView);

小提琴：

作为第三个选项，如果您的新视图实际上要与当前页面共存，则可以根据状态显示或隐藏组件。乙二醇

return [
    m("button", { onclick: ctrl.showModal.bind(ctrl, !showModal) }, showModal ? "Hide Account" : "Account")
    , showModal ? m.component(OtherView) : null
];

---

小提琴手：我认为第三种选择是最好的。了解米特里尔最重要的一点是，它不是“现在做一件事”，而是“改变状态，让事情发生”。视图表达了DOM可能处于的所有状态，并更改了条件以满足这些条件。是的，这是一种我经常使用的模式，但我不确定我是否正确地阅读了这个问题（使用“页面”一词vs“组件”：-），使用“页面”一词使我倾向于使用路由，虽然问题本身指的是呈现组件，因此选项3听起来不错：-）非常感谢您的回复Bryce。fist命令对我来说很好，但是告诉我如果我错了，我失去了route命令的好处，它在启动时加载所有组件。所以我会尝试使用第二个选项，一个带有图像的链接来模拟一个按钮。但是如果有一个链接，我可以控制用户输入，因为用户输入是错误的，所以最终会停留在ActudiVIEW上吗？如果你正在检索用户输入，那么我会考虑使用一个带有<代码> OnSudio的表单来执行你正在进行的功能。IME在很多场景中使用HTML5验证规则（例如

必需的

属性等）来为您处理所有验证处理非常简单（因为如果表单无效，

提交

甚至不会触发）。或者（如验证更复杂），我会考虑使用<代码>按钮<代码> >代码> {禁用：.ctrl。ISValube（），OnCalc: FUNC}类型检查（再次），因为您知道函数（<代码> FUNC >如果<代码>有效> <代码>函数为FALSE，则不会触发。

return [
    m("button", { onclick: ctrl.showModal.bind(ctrl, !showModal) }, showModal ? "Hide Account" : "Account")
    , showModal ? m.component(OtherView) : null
];