Question

我必须开发一个单一应用页面，我选择秘银。

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

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

If you're using Mithril's routing functionality and want to show a whole new page, then you can use a link rather than using a button. (Personally, this is how I normally anticipate handling these scenarios.) eg,

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

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

(Alternatively, you could also call m.route('/otherPage') within the showOtherPage function if a link is not appropriate for some reason.)

Or, if you're not using Mithril's routing (eg if you're using m.mount), but still want to render a whole new page, you might want to call m.mount with the new view to have it rendered. eg

m.mount(document.body, otherView);

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

As a third option, if your new view is actually meant to coexist with the current page, you can have a component that's shown or hidden based on state. eg

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

Fiddle: https://jsfiddle.net/mk27tfq1/

Mithril在点击按钮时显示组件

1 个答案: