teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問monaca OnsenUIでpostpushが動かない

編集履歴

質問編集履歴

3

環境について追記

2018/01/11 14:42

投稿

Bokunet
Bokunet

スコア41

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,10 @@
1
1
  ページ遷移後にjsで要素を追加したいのでpostpushを使いたいです。
2
2
 
3
+ ## 環境
3
4
 
5
+ - Onsen UI V2 JS Navigationでアプリを作っています。
6
+
7
+ - Angular.jsは使っていません。
4
8
 
5
9
  ## まずは検証用として作ったソースコードを
6
10
 

2

エラーメッセージの追記

2018/01/11 14:42

投稿

Bokunet
Bokunet

スコア41

test CHANGED
File without changes
test CHANGED
@@ -110,6 +110,16 @@
110
110
 
111
111
  [Onsen UI でOnsen UIフレームワーク内の要素にjQueryでアクセスできない](https://qiita.com/Kumassy/items/6e16d2d8b40752e1bc91#settimeout)
112
112
 
113
+
114
+
115
+ ## 表示されるエラー
116
+
117
+ chromeのデベロッパーツールを見ると…
118
+
119
+ `Uncaught TypeError: nav.on is not a function`
120
+
121
+ と出ます。
122
+
113
123
  ここに書いてあるsetTimeoutを使ってその場しのぎをしているのですが、その下に書いてあるpostpushが全く動かず困っています。
114
124
 
115
125
 

1

冗長な質問文を根本的に改善修正

2018/01/11 14:38

投稿

Bokunet
Bokunet

スコア41

test CHANGED
@@ -1 +1 @@
1
- ページ遷移後にjsで要素を追加したい
1
+ monaca OnsenUIでpostpushが動かない
test CHANGED
@@ -1,78 +1,10 @@
1
- # やりたいこと
2
-
3
- Monacaでクイズアプリを作っています。
4
-
5
- jsonで複数の問題を取得し、1問目の画面→1問目の答え（解説）の画面→2問目の答え（解説）画面…を繰り返したいです。
6
-
7
- ## 動作環境
8
-
9
- - Monacaの新規プロジェクトのOnsen UI V2 JS Navigationでプロジェクト（クイズ）を作成しています。
10
-
11
- - Angular.jsは使用していません。
12
-
13
- ## 出来ていること
14
-
15
- 最低限のことは出来てます
16
-
17
- - jsonファイルの取得、パース
18
-
19
- - 問題から答えの画面に遷移する際、**setTimeout**での正解用、不正解用画像の出し分け
1
+ ページ遷移後にjsで要素を追加したいのでpostpushを使いたいです。
20
-
21
- - 最後に解いた問題数に対する正解率の表示
22
2
 
23
3
 
24
4
 
25
- 例えば、問題から答えに遷移する際に以下のような関数を走らせています
5
+ ## まずは検証用として作ったソースコードを
26
6
 
27
- ```javascript
28
-
29
- var target = document.getElementById("target");
30
-
31
- function to_answer(e){
32
-
33
- //答え用のテンプレートに移動
34
-
35
- fn.pushPage(e);
36
-
37
- //遷移した先のページで画像を表示させたい
38
-
39
- setTimeout(
40
-
41
- function(){
42
-
43
- if(選択した項目 == jsonに入ってた答え){
7
+ __html5で省略可能なタグは極力削ってます__
44
-
45
- //合っていれば<div id="target">に正解の画像を表示
46
-
47
- target.innerHTML = '<img src="correct.png">';
48
-
49
- }else{
50
-
51
- //間違っていれば不正解の画像を表示
52
-
53
- target.innerHTML = '<img src="incorrect.png">';
54
-
55
- }
56
-
57
- },
58
-
59
- 10 //10ミリ秒後に実行し、書き換え
60
-
61
- );
62
-
63
- ```
64
-
65
- ## これが出来ない
66
-
67
- スペックが高いスマホなら問題なく上記の処理が出来るが、スペックが低いスマホだと画像が表示されません。
68
-
69
- setTimeoutの10ミリ秒をもっと遅くすればいいのですが、そうするとスペックが高いスマホなのにスペックが低いスマホに合わせて表示が遅くなってしまいます。
70
-
71
- OnsenUIのサイトを見るとpageがpushされてアニメーションが終了してから発火される`postpush`が用意されているのですが、いざ使おうとするとエラーが出てしまいます。
72
-
73
-
74
-
75
- **現在検証用に使用してるソースを載せます**
76
8
 
77
9
  ```html
78
10
 
@@ -90,7 +22,7 @@
90
22
 
91
23
 
92
24
 
93
- <ons-navigator var="myNavigator" page="first.html"></ons-navigator>
25
+ <ons-navigator id="navigator" var="myNavigator" page="first.html"></ons-navigator>
94
26
 
95
27
 
96
28
 
@@ -132,20 +64,56 @@
132
64
 
133
65
  <script>
134
66
 
67
+ var nav = document.getElementById("navigator");
68
+
69
+
70
+
135
71
  document.addEventListener('init', function(event) {
136
72
 
137
73
  window.fn = {};
138
74
 
139
75
  //ページ遷移
140
76
 
141
- window.fn.pushPage = function(page){
77
+ window.fn.pushPage = function(page) {
142
78
 
143
- myNavigator.pushPage(page);
79
+ nav.pushPage(page);
144
80
 
145
81
  };
146
82
 
147
83
  });
148
84
 
85
+
86
+
87
+ ons.ready(function() {
88
+
89
+ nav.on('postpush', function(event) {
90
+
91
+ console.log("ページ遷移アニメーション終わったよ");
92
+
93
+ });
94
+
95
+ });
96
+
149
97
  </script>
150
98
 
99
+
100
+
151
101
  ```
102
+
103
+ ## 参考にしたサイト
104
+
105
+ [ons-navigator - Onsen UI](https://ja.onsen.io/v2/api/js/ons-navigator.html#events-summary)
106
+
107
+ このページを見て、postpushの存在を知る（それまでsetTimeoutでやってました）
108
+
109
+
110
+
111
+ [Onsen UI でOnsen UIフレームワーク内の要素にjQueryでアクセスできない](https://qiita.com/Kumassy/items/6e16d2d8b40752e1bc91#settimeout)
112
+
113
+ ここに書いてあるsetTimeoutを使ってその場しのぎをしているのですが、その下に書いてあるpostpushが全く動かず困っています。
114
+
115
+
116
+
117
+
118
+
119
+ どうか、よろしくお願いします。