Template7 and v6

Questions
1

Hello! Previously, before version 6, I used the built-in template7 function of the form - {{$ root.title}}.

But in the new version it has been removed.
In my application, many texts are filled in this way. Now I can’t think of how to get around this.

I would be grateful for your help. Thank you.

2

just download the source code
and add it to your index.html file

<html>
    <head>
        ...
        <script src="path/to/template7.min.js"></script>
    </head>
    <body>
        ...
    </body>
</html>
3

OK, thanks. Is it possible not to use the template7, but to do with the standard means of framework7 v6?

4 
{
  path: '/some-page/',
  component: (props, { $h }) => {
    const root = {a:'A', b:'B'};
    const names = ['John', 'Vladimir', 'Timo'];
    return () => $h`
      <div class="page">
        <div class="page-content">
          <div class="list simple-list">
            <ul>
              ${names.map((name) => $h`
                <li>${name} ${root.a} ${root.b}</li>
              `)}
            </ul>
          </div>
        </div>
      </div>
    `;
  }
}
5

In v6 there is a Store for global state management https://framework7.io/docs/store.html

6

I did not understand the Store.
Made it simpler: declared a new global constant “text” and use ${text.title}

Thanks for your feedback.

7 
var app = new Framework7({
  el: '#app',
  store: Framework7.createStore({ state: { text: { title: "title" } } })
  //store: { state: { text: { title: "title" } } } // also works
});

{
  path: '/some-page/',
  component: (props, { $h, $store }) => {
    const text = $store.state.text;
    const names = ['John', 'Vladimir', 'Timo'];
    return () => $h`
      <div class="page">
        <div class="page-content">
          <div class="block-title">${text.title}</div>
          <div class="list simple-list">
            <ul>
              ${names.map((name) => $h`
                <li>${name} ${text.title}</li>
              `)}
            </ul>
          </div>
        </div>
      </div>
    `;
  }
}
1 Like