我尝试在2个不同的framework7和模板7页面中从Firebase加载数据。
不幸的是只能在索引页面上工作。我不知道为什么。 这是我的HTML代码。
<script id="calendario" type="text/template7">
<div class="title">Calendario</div>
{{#each Tornei}}
<a href="calendario-detail.html" class="eventblock w-inline-block item-content item-link" data-context-name="Tornei.{{@key}}">
<div class="w-row">
<div class="nopadding w-col w-col-6 w-col-small-6 w-col-tiny-6">
<div class="smalltext">{{this.Location}}</div>
</div>
<div class="nopadding w-col w-col-6 w-col-small-6 w-col-tiny-6">
<div class="smalltext">{{Location}}</div>
</div>
</div>
<div class="titleevent titologreen">{{@key}}</div>
<div class="smalltext">4 / 8</div>
</a>
{{/each}}
这是myapp.js
myApp.onPageInit('calendario', function (page) {
var ref = firebase.database().ref("/");
ref.on("value", function(snapshot) {
var template = $$('#calendario').html();
var compiledTemplate = Template7.compile(template);
var ourGeneratedHTML = compiledTemplate(snapshot.val());
console.log(snapshot.val());
$$('#1').html(ourGeneratedHTML);
$$('.eventblock').on('click', function () {
var nameEvent = $$(this).children('.titleevent').text();
mainView.router.loadPage("calendario-detail.html?eventName=" + nameEvent);
});
});
}).trigger();
myApp.onPageInit('calendario-detail', function (page) {
var ref = firebase.database().ref("/");
ref.on("value", function(snapshot) {
var template = $$('#calendario-detail').html();
var compiledTemplate = Template7.compile(template);
var last = JSON.stringify(snapshot.val())
console.log(last);
var ourGeneratedHTML = compiledTemplate(snapshot.val());
console.log(snapshot.val());
$$('#1').html(ourGeneratedHTML);
console.log(ourGeneratedHTML);
});
});
正如您所看到的,它们是相同的,但template7仅适用于我的索引。
你可以帮帮我吗?感谢。答案 0 :(得分:0)
我有同样的问题,所以,我初始化我的应用程序:
var myApp = new Framework7({
// Unable templates auto precompilation
precompileTemplates: false,
// Unabled pages rendering using Template7
template7Pages: false,
});
之后我可以使用onPageAfterAnimation在其他视图上编译模板。