javascript - 单击按钮时 Mithril 显示组件

Question

我要开发一个单一的应用程序页面，我选择 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")
        ];
    }
}

提前致谢

Answer 1

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

m("a[href=/otherPage]", { config: m.route }, "Account")

fiddle :https://jsfiddle.net/11qjx341/

(或者，如果链接由于某种原因不合适，您也可以在 showOtherPage 函数中调用 m.route('/otherPage')。)

或者，如果您没有使用 Mithril 的路由(例如，如果您正在使用 m.mount)，但仍想呈现一个全新的页面，您可能需要调用 m.mount 与新 View 一起渲染。例如

m.mount(document.body, otherView);

fiddle :https://jsfiddle.net/91g9db6n/

作为第三种选择，如果您的新 View 实际上要与当前页面共存，您可以拥有一个根据状态显示或隐藏的组件。例如

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

fiddle :https://jsfiddle.net/mk27tfq1/