How to display a non-main View in svelte

1

I am using framework7-svelete starter app, and the app runs fine. I am now attempting to create a view as followes:

regustration.view.svelte

<script>
  import {
    App,    Block,    BlockFooter,    BlockTitle,    f7,    f7ready,    Link,
    List,    ListButton,    ListInput,    ListItem,    LoginScreen,    LoginScreenTitle,    Navbar,    NavRight,    Page,    Panel,    Popup,
    Toolbar,    View,    Views,
  } from 'framework7-svelte'

  import regisrationRoutes from './registration.routes'

  let f7Params = {
    name: 'Registration',
    theme: 'auto',
    routes: regisrationRoutes
  }


  function gotoName() {
    // f7ready.views.registration.router.navigate('/registration/patient/name/')
    console.log(f7.views.registration)
  }

</script>

<View name = 'registration'
      router
      loadInitialPage
      init='{true}'
      url = '/registration/patient/name/' >
</View>

registration.rourtes.js

let registrationRoutes = [
  {
    path: '/registration/patient/address/',
    component: AddressPage,
  },

  {
    path: '/registration/patient/name/',
    component: NamePage,
  },

  {
    path:'/registration/',
    component: RegistrationPage
  },
]

name.svelte - simple page

My folder structure is demonstrated in the graphic below

project folder structure

image
image476×1034 30.1 KB

How can I display this registration.view.svelte?

2

Seems like you miss understood a bit meaning of the View.

View - is a separate visual part of the app with its own settings, navigation and history. So it is some kind of app in app. Such kind of functionality allows you easily manipulate each part of your app

So you shouldn’t somehow load the View. You can load Pages into Views. It is better to manage all Views in main App component, somehow like:

<App>
  {#if loggedIn}
    <View main url="/" />
  {:else}
    <View main url="/login/" />
  {/if}
</App>
3

Agreed about the misunderstanding. Thanks for your patients.

4

I have the following view in the app.svelt file

app.svelte

  <View
      init
      name = 'registration'
      preloadPreviousPage
      reloadPages
      routes = {registrationRoutes}
      url = '/registration/'/>

The routes are the same as mentioned above.

registration.svelte

<script>
  import {
    f7,  AccordionContent,  Block,  BlockTitle, Button,  Link,  List,
    ListButton, ListInput,ListItem,  Navbar,  Page,  Range,  Row,
    Tab,  Tabs,  Toolbar,  Toggle,
  } from 'framework7-svelte'

  let router = f7.views.registration.router
  console.log(router)
  let isTop = true
</script>

<Page name = 'registration'
      pageContent = {false}>
  <Navbar title = 'New Registration'
          backLink = 'Back'/>
  <Toolbar tabbar
           labels
           position = {isTop ? 'top': 'bottom'}>
    <Link tabLink = '#patient'
          tabLinkActive
          text = 'Patient'
          iconMd = 'material:email'/>
  </Toolbar>

  <Tabs>
    <Tab tabActive
         id = 'patient'
         class = 'page-content'>
      <List>
        <ListButton
            href = '/registration/patient/address/'
            title = 'Address'/>
      </List>
    </Tab>
  </Tabs>
</Page>

The problem is that the address url ‘/registration/patient/address/’ does not open the address page, but the 404.svelte page is open instead.

How can I get the registration view to open the attached routes in itself?

The ’ console.log(router)’ statement above gives me the main (default) router of app.svelte.

Thanks

1 Like
5

When you calling router’s navigate or have a link, it will open a page in this router -> in this View. If you are trying to click a link in one view and you have in your app another view where you want to open it -> then you need to specify in what view link should load the page. It is done with view prop on link