在温泉中使用多个 html 文件 UI

Question

我刚刚发现了温泉ui，我非常喜欢它的设计和感觉。

不过我有一个问题：

http://onsen.io/guide/overview.html#DefiningMultiplePagesinSingleHTML

这里写着："Instead of creating menu.html and content.html in separate files, you can also define the page content in the same page."

我不喜欢将我的整个应用程序放在一个 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 文件的内容将正确显示。

这是一个错误吗？有解决方法吗？我尝试在 ons.ready() 事件中将页面加载到 $templateCache 中。它们已成功加载，但直到第二次单击才再次显示...

如果像这样的优秀框架不提供将项目拆分为多个文件的功能，那将是一种耻辱。

Answer 1

删除 <ons-template> 标签。只有在 index.html.

中定义模板时才需要它

在温泉中使用多个 html 文件 UI

Using multiple html files in onsen UI

angularjs

onsen-ui