About ons-template when pages are converted into separate files

If you tap from index.html to page1.html (another file) using navigator.pushPage()
Is it possible to write ons-template in pgae1.html?

I don't know if the usage is correct, but I would like to write ons-page on page1.html and use ons-template separately.
If I make it into a separate file like this, do I have to make it into a separate file instead of an ons-template?

onsen-ui

2022-09-29 21:58

1 Answers

Multiple html files and ons-template do not work

There is an answer to this question, but it seems that you need to ng-include before you can use the ons-template in a different file.

<ng-include src="'page1.html'">/ng-include>

However, if you set it to ons-navigator in index.html like this, it doesn't seem to work (probably page1.html will not be loaded).Maybe it's just a bad way to do it...)

page1.html*This is common among A, B, and C below

<ons-template id="sub-page1">
  <ons-page>
      <ons-toolbar>
          <div class="center">Sub Page1</div>
      </ons-toolbar>
      <div style="text-align:center">
          <h1>Sub Page1</h1>
          <ons-button onclick="navi.pushPage('sub-page2')">
            Push Page
          </ons-button>  
      </div>
  </ons-page>
</ons-template>

<ons-template id="sub-page2">
  <ons-page>
      <ons-toolbar>
          <div class="left"><ons-back-button>Back</ons-back-button></div>
          <div class="center">Sub Page2</div>
      </ons-toolbar>
      <div style="text-align:center">
          <h1>Sub Page2</h1>
          <ons-button onclick="navi.popPage()">
            Pop Page
          </ons-button>  
      </div>
  </ons-page>
</ons-template>

index.html

A. This doesn't work

<!DOCTYPE HTML>
<html>
<head>
    ~ Abbreviated.
    <script>
      ons.bootstrap();
    </script>
</head>
<body>
    <ng-include src="'page1.html'">/ng-include>
    <ons-navigator var="navi" page="sub-page1">
    </ons-navigator>
</body>
</html>

B. This worked (I think) well.たまに Sometimes it doesn't move

<!DOCTYPE HTML>
<html>
<head>
    ~ Abbreviated.
    <script>
    　ons.bootstrap();
      ons.ready(function(){
        // Configure the page in page1.html
        navi.resetToPage('sub-page1');
      });
    </script>
</head>
<body>
    <ng-include src="'page1.html'">/ng-include>
    // Set dummy for now
    <ons-navigator var="navi" page="dummy">
    </ons-navigator>
    <ons-template id="dummy">
      // dummy page
    </ons-template>
</body>
</html>

C. This seems to have the highest success rate *Sometimes it doesn't move

<!DOCTYPE HTML>
<html>
<head>
    ~ Abbreviated.
    <script>
    　ons.bootstrap();
      ons.ready(function(){
        // Wait 500 milliseconds before setting the page in page1.html
        setTimeout(function(){
          navi.resetToPage('sub-page1');
        }, 500);
      });
    </script>
</head>
<body>
    <ng-include src="'page1.html'">/ng-include>
    <ons-navigator var="navi">
    </ons-navigator>
</body>
</html>

Since I tried it, I have also listed B, but I think C is easier.

Adjust C latency
Look for events to be called when you are ready

You may be able to eliminate "sometimes it doesn't move" by doing things like that.

2022-09-29 21:58

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656