Skip to main content
コード書式を適用
ソース リンク
harry0000
  • 2,800
  • 4
  • 18
  • 22

OnsenUI使用歴が長い訳ではないため100%保証はできませんがお答えします。

ons-templateについてons-template について勘違いをされているかと思われます。(自分がそうでした)
thymeleaf

thymeleafのreplaceのようなhtmlの一部を読み込むようなものではありません。

まずons-templateと ons-templateは、本来別のhtmlファイルを作成しなければならないものを、id属性に指定した"page2.html"としてあたかも別のhtmlファイルが存在しているようにしているものです。

ですので別のファイルに分ける場合

・index.html
・page2.html
・pageA.html
・pageB.html
・pageC.html

のように5つのファイルを作らなければなりません。(
この際、各ファイル内にons-templateタグ ons-template タグは不要です。)

そしてそれを1つのhtmlファイルにまとめることができるようにしたものがons-templateです ons-template です

また、上記から次の発想が生まれるかもしれません。(自分がそうでした。)
・index

・index.html
・page2.html
<ons-page>
この中に<ons-template>でpageA~pageCを記述
</ons-page>

<ons-page>
   <!-- この中に <ons-template> で pageA ~ pageC を記述 -->
</ons-page>

しかしこれもうまくいきません。
OnsenUIのpageアタッチ処理内ではinnerHTMLで生成を行っているようですが、この内部でエラーとなります。

ですので、
①ファイルを分ける場合はtemplate毎に分ける
②分けない場合はindex.htmlに記載する

以下のどちらかの形をとらなければならないようです。

  • ファイルを分ける場合はtemplate毎に分ける
  • 分けない場合はindex.htmlに記載する

OnsenUI使用歴が長い訳ではないため100%保証はできませんがお答えします。

ons-templateについて勘違いをされているかと思われます。(自分がそうでした)
thymeleafのreplaceのようなhtmlの一部を読み込むようなものではありません。

まずons-templateとは、本来別のhtmlファイルを作成しなければならないものを、id属性に指定した"page2.html"としてあたかも別のhtmlファイルが存在しているようにしているものです。

ですので別のファイルに分ける場合

・index.html
・page2.html
・pageA.html
・pageB.html
・pageC.html

のように5つのファイルを作らなければなりません。(この際、各ファイル内にons-templateタグは不要です。)

そしてそれを1つのhtmlファイルにまとめることができるようにしたものがons-templateです

また、上記から次の発想が生まれるかもしれません。(自分がそうでした。)
・index.html
・page2.html
<ons-page>
この中に<ons-template>でpageA~pageCを記述
</ons-page>

しかしこれもうまくいきません。
OnsenUIのpageアタッチ処理内ではinnerHTMLで生成を行っているようですが、この内部でエラーとなります。

ですので、
①ファイルを分ける場合はtemplate毎に分ける
②分けない場合はindex.htmlに記載する

どちらかの形をとらなければならないようです。

OnsenUI使用歴が長い訳ではないため100%保証はできませんがお答えします。

ons-template について勘違いをされているかと思われます。(自分がそうでした)

thymeleafのreplaceのようなhtmlの一部を読み込むようなものではありません。

まず ons-templateは、本来別のhtmlファイルを作成しなければならないものを、id属性に指定した"page2.html"としてあたかも別のhtmlファイルが存在しているようにしているものです。

ですので別のファイルに分ける場合

・index.html
・page2.html
・pageA.html
・pageB.html
・pageC.html

のように5つのファイルを作らなければなりません
この際、各ファイル内に ons-template タグは不要です。)

そしてそれを1つのhtmlファイルにまとめることができるようにしたものが ons-template です

また、上記から次の発想が生まれるかもしれません。(自分がそうでした。)

・index.html
・page2.html

<ons-page>
   <!-- この中に <ons-template> で pageA ~ pageC を記述 -->
</ons-page>

しかしこれもうまくいきません。
OnsenUIのpageアタッチ処理内ではinnerHTMLで生成を行っているようですが、この内部でエラーとなります。

ですので、以下のどちらかの形をとらなければならないようです。

  • ファイルを分ける場合はtemplate毎に分ける
  • 分けない場合はindex.htmlに記載する
修正
ソース リンク

OnsenUI使用歴が長い訳ではないため100%保証はできませんがお答えします。

ons-templateについて勘違いをされているかと思われます。(自分がそうでした)
thymeleafのreplaceのようなhtmlの一部を読み込むようなものではありません。

まずons-templateとは、本来別のhtmlファイルを作成しなければならないものを、id属性に指定した"page2.html"としてあたかも別のhtmlファイルが存在しているようにしているものです。

ですので別のファイルに分ける場合

・index.html
・page2.html
・pageA.html
・pageB.html
・pageC.html

のように5つのファイルを作らなければなりません。(この際、各ファイル内にons-templateタグは不要です。)

そしてそれを1つのhtmlファイルにまとめることができるようにしたものがons-templateです。

また、上記から次の発想が生まれるかもしれません。(自分がそうでした。)
・index.html
・page2.html
<ons-page>
この中に<ons-template>でpageA~pageCを記述
</ons-page>

しかしこれもうまくいきません。
OnsenUIのpageアタッチ処理内ではinnerHTMLで生成を行っているようですが、この内部でエラーとなります。

ですので、
①ファイルを分ける場合はtemplate毎に分ける
②分けない場合はindex.htmlに記載する

どちらかの形をとらなければならないようです。

OnsenUI使用歴が長い訳ではないため100%保証はできませんがお答えします。

ons-templateについて勘違いをされているかと思われます。(自分がそうでした)
thymeleafのreplaceのようなhtmlの一部を読み込むようなものではありません。

まずons-templateとは、本来別のhtmlファイルを作成しなければならないものを、id属性に指定した"page2.html"としてあたかも別のhtmlファイルが存在しているようにしているものです。

ですので別のファイルに分ける場合

・index.html
・page2.html
・pageA.html
・pageB.html
・pageC.html

のように5つのファイルを作らなければなりません。(この際、各ファイル内にons-templateタグは不要です。)

そしてそれを1つのhtmlファイルにまとめることができるようにしたものがons-templateです。

OnsenUI使用歴が長い訳ではないため100%保証はできませんがお答えします。

ons-templateについて勘違いをされているかと思われます。(自分がそうでした)
thymeleafのreplaceのようなhtmlの一部を読み込むようなものではありません。

まずons-templateとは、本来別のhtmlファイルを作成しなければならないものを、id属性に指定した"page2.html"としてあたかも別のhtmlファイルが存在しているようにしているものです。

ですので別のファイルに分ける場合

・index.html
・page2.html
・pageA.html
・pageB.html
・pageC.html

のように5つのファイルを作らなければなりません。(この際、各ファイル内にons-templateタグは不要です。)

そしてそれを1つのhtmlファイルにまとめることができるようにしたものがons-templateです。

また、上記から次の発想が生まれるかもしれません。(自分がそうでした。)
・index.html
・page2.html
<ons-page>
この中に<ons-template>でpageA~pageCを記述
</ons-page>

しかしこれもうまくいきません。
OnsenUIのpageアタッチ処理内ではinnerHTMLで生成を行っているようですが、この内部でエラーとなります。

ですので、
①ファイルを分ける場合はtemplate毎に分ける
②分けない場合はindex.htmlに記載する

どちらかの形をとらなければならないようです。

ソース リンク

OnsenUI使用歴が長い訳ではないため100%保証はできませんがお答えします。

ons-templateについて勘違いをされているかと思われます。(自分がそうでした)
thymeleafのreplaceのようなhtmlの一部を読み込むようなものではありません。

まずons-templateとは、本来別のhtmlファイルを作成しなければならないものを、id属性に指定した"page2.html"としてあたかも別のhtmlファイルが存在しているようにしているものです。

ですので別のファイルに分ける場合

・index.html
・page2.html
・pageA.html
・pageB.html
・pageC.html

のように5つのファイルを作らなければなりません。(この際、各ファイル内にons-templateタグは不要です。)

そしてそれを1つのhtmlファイルにまとめることができるようにしたものがons-templateです。