我只是发现了温泉,我真的很喜欢它的设计和感觉.
我有一个问题,但是:
http://onsen.io/guide/overview.html#DefiningMultiplePagesinSingleHTML
这里说:“而不是在单独的文件中创建menu.html和content.html,也可以在同一页面中定义页面内容.”
我不想让我的整个应用程序在一个html文件,所以我试图将每个模板放在一个单独的文件.这是我的文件结构:
www - index.html - products.html - services.html
这是我的标签:
<ons-tabbar> <ons-tabbar-item active="true" page="products.html"> <div class="tab"> <ons-icon icon="ion-home" class="tab-icon"></ons-icon> <div class="tab-label">Products</div> </div> </ons-tabbar-item> <ons-tabbar-item page="services.html"> <div class="tab"> <ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon> <div class="tab-label">Services</div> </div> </ons-tabbar-item> </ons-tabbar>
编辑
services.html(products.html类似)的内容:
<ons-template id="services.html"> <ons-page> <ons-toolbar> <div class="center">Services</div> </ons-toolbar> <ons-list> <ons-list-item>Item1</ons-list-item> <ons-list-item>Item2</ons-list-item> <ons-list-item>Item3</ons-list-item> </ons-list> </ons-page> </ons-template>
完成编辑
现在,当应用程序加载(Firefox,Chrome,iOS模拟器)时,它将显示标签栏和空的内容.
在控制台中,您可以看到外部html文件尚未加载.
如果我点击服务,浏览器将获取services.html文件,但不显示.我点击产品,products.html文件被加载,但不显示.
最后:如果我第二次点击服务,外部html文件的内容正确显示.
这是一个bug吗?有解决方法吗?我尝试在ons.ready()事件上将页面加载到$templateCache中.他们已成功加载,但再次不显示,直到第二次点击…
如果一个很棒的框架不会将项目分割成多个文件,那将是一个耻辱.