在温泉UI使用多个HTML文件多个、温泉、文件、UI

2023-09-13 04:30:57 作者:别对我假

我刚刚发现温泉UI和我真的很喜欢的设计和它的感觉。

I just discovered onsen ui and I really like the design and the feeling of it.

我有一个问题,虽然:

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

这说:与其在创建单独的文件menu.html和content.html,你也可以定义在同一个页面的页面内容。

Here it says: "Instead of creating menu.html and content.html in separate files, you can also define the page content in the same page."

我不喜欢有我在一个HTML文件整个应用程序,所以我试图把每个模板到一个单独的文件中。这是我的文件结构:

I don't like to have my whole app in one html file so I tried to put each template into a separate file. This is my file structure:

www
- index.html
- products.html
- services.html

这是我的TabBar:

This is my tabbar:

<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类似):

EDIT contents of services.html (products.html is similar):

<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>

END修改

现在,当应用程序负载(火狐,Chrome,iOS版仿真器),它会显示的TabBar和空内容。在控制台中可以看到,在外部HTML文件尚未加载。如果我点击服务,浏览器的可获得的的services.html文件,但它不会显示。我点击产品时,将products.html文件被加载,但不显示。

Now, when the app loads (Firefox, Chrome, iOS emulator) it will display the tabbar and empty content. In the console you can see that the external html files have not been loaded yet. If I click on Services, the browser gets the services.html file, but it is not displayed. I click on Products, the products.html file gets loaded, but not displayed.

最后:如果我在服务单击第二个时间,正在正确显示外部HTML文件的内容

Finally: If I click on Services the second time, the contents of the external html file are being displayed correctly.

这是一个错误吗?有没有解决办法?我试着装上ons.ready()事件的页面到$ templateCache。他们已成功加载,但不再显示,直到第二次点击...

Is this a bug? Is there a workaround? I tried loading the pages into $templateCache on the ons.ready() event. They were successfully loaded, but again not displayed until the second click...

将是一种耻辱,如果这样的大框架不会提供拆分项目分成多个文件。

Would be a shame if a great framework like this would not offer splitting a project into multiple files.

推荐答案

删除&LT;插件模板&GT; 标记。它,如果你定义模板的index.html唯一需要

Remove the <ons-template> tag. It's only needed if you define the templates in index.html.