【framework7】HTML内でのjavascriptの呼び出し方
≈
開発しているとすぐにHTMLの中でjavascriptを呼び出したいという場面が出てくる。framework7の中でHTML内でjavascriptを使うにはちょっとステップを踏まなければいけなかった。
普通にこんな風に書いてみたところでうんともすんとも言わない。
<script> app.dialog.alart(“test"); </script>
Router Component | Framework7 Documentation
ドキュメントを見てみると確かにHTMLの中でJavascriptを呼び出しているし、そんな書き方もできるみたい。
呼び出すのに変更した箇所は2つ。
1.HTML側の先頭と最後にtemplateを追加
<template> <!-- HTML本文 —> </template> <script> return { ... } </script>
loader.html
こんな構成にする。
2.route.jsでjavascriptを呼び出したいページをcomponentUrlに指定
routes = [ { path: '/', url: './index.html', }, { path: '/loader/', componentUrl: './pages/loader.html', }, ・・・ ];
この2つの手順を踏むとHTMLの本文内でjavascriptが呼び出せるようになった。
Router Component | Framework7 Documentation
<script> return { // Page Events on: { pageAfterIn: function(e, page) { viewEditMembers(); }, } } </script>
あとはこんな書き方をするとonLoadみたいに使うことができる。framework7のアプリ内はシングルページみたいな構成になっていてbodyがindex.htmlにしか出現しないので、これもちょっと困ったところでした。