javascript - 框架7 : How to refresh a page after changing template data?

Question

文档说，我们可以更改模板数据。但修改数据后，页面内容并没有更新。我不明白如果更新后的数据无法呈现还有什么意义。

谁能告诉我如何刷新数据？

谢谢。

Answer 1

这取决于您如何编译模板

如果您使用的是类似的模板

<script id="template1" type="text/template7">....</script>

精简编译和加载页面，您可以通过执行手动编译和加载

var compiledTemplate = Template7.compile(template);
var data = {
    foo: 'bar'
};
var html = compiledTemplate(data);
$$('#element').html(html);

---

如果您使用的是模板页面
例如:home_page.html

<div class="pages navbar-through">
<div data-page="home" class="page navbar-through">
    ....
    <div>{{foo}}<div>
    ...

然后您可以使用Framework7自动编译页面

var myApp = new Framework7({
    ...
    precompileTemplates: true,
    template7Pages: true,
    template7Data: {
        'url:pages/home_page.html': {foo: 'bar'}
    }
});    

---

注意 您无法编译默认页面 Ex: page in index.html 但如果您想这样做，请将该页面的内容移动到另一个文件 ex main_page.html 并使用

mainView = myApp.addView('.view-main', {
        dynamicNavbar: true // for ios only
    });
mainView.router.loadPage('pages/main_page.html');

有关更多信息，请阅读 Template7 syntax