[v3.6]Another puzzle,how to create dynamic content panel?

1

http://framework7.io/docs/panel.html#routable-panels
I read it ,but helpless.
I don’t understand,how to create panel via router component.
I did some test but failed.
More puzzled things:
1.how to insert page to left panel via componenturl,just like app.views.create(’.view-main’,{url: ‘home.htm’})

 routes =[
 {
    path: 'leftPanel',
    panel:{
       componentUrl:'leftpanel.htm'
    }
 },
...]

<div class="panel panel-left panel-cover">
  <div class="view view-left">
    /*component loaded here*/
...
<div class="views">
  <div class="view view-main">

2.panel & view，which one would work when a.link was clicked

 <a href="/leftPanel/" data-view=".view-left" data-panel="left" class="link icon-only panel-open">

3.Based on the above two points, page loading cannot be properly scheduled through the link with data-view=".some-view"

2
  1. In component (‘leftpanel.htm’) http://framework7.io/docs/router-component.html#component-root-element:

<template>
<div class="panel panel-left panel-cover">
…
</div>
< /template >

To open panel: <a href="leftPanel">Open Panel</a>
Advice: 'leftPanel' => '/leftPanel'

  1. If panel element in HTML http://framework7.io/docs/panel.html#panel-layout :
    <a href="#" data-panel="left" class="link icon-only panel-open">...</a>
3

Thanks many.
It’s better
but still not a solution for dynamic content panel
Seem panel was a container for view,but…
When to create view instance for view.view-left？It seems to go back to my first question
Although i can do the rest with Dom7, that’s a terrible way to do
More confused

Root & view & router & page & panel… more puzzles

  1. It is very difficult for me to figure out structure of the F7.
  2. I think a clear diagram will be better help us to understand the hierarchical relationship between components.
  3. Component lifecycle diagrams should help us to leverage the capabilities of F7 better
1 Like
4

Btw when component panel opened,
no view created by div.view-init，
router component panel was loaded : template was ready,but data never be rendered
so,i can not find any way for dynamic data rendered panel
Would you please show me more codes clearly?
Appreciate your help.

5

the same for me, quite confusing how to well structure a project. a simple reference example in vanilla javascript with ajax login/register/logout and some ajax calls would be great!

6

you can try like this. i dont think this is a good solution…

jsfiddle

7

The key question is:
how do you bring a view into a panel and initialize it to get its instance？
I’ve always thought that using router to load and compile the template and then inject context for rendering is the best solution.
But what always bothers me is how do I load the panel properly and initialize the view inside of it.

8

I already posted an answer here [3.6]Mayday: Is there any way to create panel with view and init & get this view instance?

You use panel as component. Then it (as any other component) has mounted life cycle hook. And you need to init View when panel component added to dom -> in its mounted hook

9

Thx for your reply.
http://forum.framework7.io/t/who-can-help-draw-a-lifecycle-diagram-for-general-component/5506/2
Combined with this answer, I became increasingly aware of the naming and calling order of components’ open ports.