Framework7：如何在更改模板数据后刷新页面？

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'}
    }
});    

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

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

了解更多信息，请阅读Template7 syntax

Answer 2

在Chrome中按F12进入开发者模式，然后按住地址栏前的重新加载按钮1秒钟以上。此操作会向您显示Hard Reload option。单击此按钮将清除chrome缓存。