scriptタグ内で、Rust のテンプレートエンジンteraが読み込まれない。

Question

RustのActix-webを使用して、webサイトを作っています。

Rustのteraというテンプレートエンジンを使用して、下記のようにhtmlを書いてみました。

<h6 id="maintitle">{{ maintitle }}</h6>
    <script>
      if(document.getElementById(maintitle).length() > 0 ){
        document.write('<h1>{{ maintitle }}</h1>');
      }
    </script>

期待していた動作はh6タグにメインタイトルのデータ(mysql内に)があれば、そのデータをh1タグに変換して表示できる。と思いました、しかし、scriptの部分が動作しませんでした。

scriptが実行される前にteraによるレンダリングが行われていると思ったんですが、、、

また、javascriptを使わない方法でも構いません（私の知らないteraの機能、Rustの良いクレート等）。とりあえず、データのあるなしで、文字の表示、非表示ができれば良いです。
よろしくお願いします。

Answer 1

scriptが実行される前にteraによるレンダリングが行われていると思ったんですが、、、

それで合ってます。以下の順番で実行されます。

1. サーバー側（actix-web）でteraを使ってHTMLを生成
2. ウェブブラウザー側でHTMLをレンダリング。その際にJavaScripコードが実行される

ではなぜ<h1>の部分が表示されないかというと、ご質問のテンプレートではJavaScriptコードに問題があり、実行時エラーになるからです。（ウェブブラウザーでJavaScriptコンソールを開くと、エラーが表示されていると思います）

1. getElementByIdの引数にmaintitle変数を渡しているが、そのような変数は存在しない
2. getElementByIdで得られたHTMLオブジェクト（<h6>タグ）の長さを取ろうとしているが、まずは<h6>...</h6>で囲まれた文字列を得なければならない
3. 文字列にはlength()メソッドは存在しない

テンプレートを以下のように修正してください。

<h6 id="maintitle">{{ maintitle }}</h6>
<script>
  if (document.getElementById('maintitle').innerHTML.length > 0) {
    document.write('<h1>{{ maintitle }}</h1>');
  }
</script>

1. getElementByIdの引数に'maintitle'文字列を渡すようにした
2. getElementByIdで得られたHTMLオブジェクトのinnerHTML属性を使ってタグで囲まれた文字列を取得するようにした
3. length属性を使って文字列の長さを取得するようにした

これで動くはずです。

Comments

[ajaj]

問題が解決しました。javascriptをもっと勉強したいと思います。
丁寧な解説をしていただきありがとうございます。