Consider following three simple pages, shown below (App.svelte, home.svelte, about.svelte). After clicking on an “About” menu in a left panel, the link “GoBack” in about.svelte, which is loaded into a #main view, dooes not work at all. However if I disable the line “curSelMenu = pos.id;” in ListItem click handler, everything works without any problems.
Can someone elighten me, what did I do wrongly ? Thank you very much in advance
App.svelte
<App theme="auto" name="F7Test" id="F7Test" {...f7params}>
<Panel left cover>
<View>
<Page>
<List accordionList>
{#each menuTree as mnu, mnuIdx}
<ListItem accordionItem title="{mnu.title}">
<AccordionContent>
{#each mnu.subItems as pos, posIdx}
<List menuList>
<ListItem panelClose
title="{pos.label}"
href="{pos.route}"
view="#main"
selected={curSelMenu === pos.id}
on:click={(e) => {
curSelMenu = pos.id;
}}
>
<span slot="media">
<Icon md="{pos.icon}" aurora="{pos.icon}" ios="{pos.icon}" />
</span>
</ListItem>
</List>
{/each}
</AccordionContent>
</ListItem>
{/each}
</List>
</Page>
</View>
</Panel>
<!-- Main view -->
<View main id="main" url="/">
<Navbar title="Application Title Bar ..."></Navbar>
<Page></Page>
</View>
</App>
<style></style>
<script>
import {
AccordionContent, App, Icon, List, ListItem, Navbar, Page, Panel, View
} from 'framework7-svelte';
import 'framework7-icons';
import HomePage from './home.svelte';
import AboutPage from './about.svelte';
const f7params = {
routes: [
{ path: '/', component: HomePage, },
{ path: '/about/', component: AboutPage, },
],
};
const menuTree = [
{
title : 'MainMenu Item 1',
content : 'Item 1',
icon : 'mdi mdi-home',
itemColor: 'blue',
disabled : false,
subItems: [
{ label: 'Home' , id: 'home' , icon: 'f7:house_fill' , route: '/' } ,
{ label: 'About' , id: 'about' , icon: 'f7:info_circle_fill' , route: '/about/' } ,
],
},
];
let curSelMenu = '';
</script>
home.svelte
<Page name="home">
<Block>
<Button panelOpen="left">Left Panel</Button>
</Block>
</Page>
<script>
import { Button, Block, Page } from 'framework7-svelte';
</script>
about.svelte
<Page name="about">
<Block>
<Link onClick={() => f7router.back()}>GoBack</Link>
</Block>
</Page>
<script>
import { Block, Page, Link } from 'framework7-svelte';
export let f7router;
</script>