Making Master Detail and Routing Without AJAX

1

I have two pages:

index.html

<div class="view view-main">
    <div class="page list">
    </div>
    
    <div class="page page-content">
    </div>
</div>

Without routes, I want the .page-content page to open when the list is pressed if it is on the phone. I want to show two pages on one screen if using tablet.

I know this can be done with routes. Can I do this without using Route?

2

I found a way:

<div id="app">
    <div class="view view-main safe-areas" data-url="/"></div>
</div>

const home = `<div class="page page-home">
    ...
</div>`;

const mail =  `<div class="page page-mail">
    ...
</div>`;

app.views.create(".view-main", {
    masterDetailBreakpoint: 720,
    routes: [
        {
            path: "/",
            content: home,
            master: true,
            detailRoutes: [
                {
                    path: "/mail",
                    content: mail
                }
            ]
        }
    ]
});
1 Like