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

Question

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

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

谢谢。

Answer 1

在 Chrome 中按 F12 进入开发者模式，然后在地址栏前按住重新加载按钮 1 秒以上。这个动作会告诉你Hard Reload option。单击此按钮将清除 chrome 缓存。

Answer 2

这取决于您如何编译模板

如果您使用类似的模板

<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 inindex.html但如果您想这样做，将该页面的内容移动到另一个文件 exmain_page.html并使用

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

有关更多信息，请阅读Template7 语法