アヤポコの雑記*2人目育児中

育児のこと、旅行のこと、仕事のこと。30代の第二子子育て中の雑記です。

【スポンサードリンク】

【framework7】HTML内でのjavascriptの呼び出し方

開発しているとすぐにHTMLの中でjavascriptを呼び出したいという場面が出てくる。framework7の中でHTML内でjavascriptを使うにはちょっとステップを踏まなければいけなかった。
普通にこんな風に書いてみたところでうんともすんとも言わない。

<script>
    app.dialog.alart(“test");
</script>

f:id:ayapc:20181230074120j:plain
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にしか出現しないので、これもちょっと困ったところでした。