teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

6

追記

2019/02/27 03:52

投稿

oikashinoa
oikashinoa

スコア2826

answer CHANGED
@@ -1,8 +1,9 @@
1
1
  [onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。
2
- `上記だけでは不十分な可能性が有ります。調査中`
3
-
4
2
  - 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
5
3
 
4
+ [ページのライフサイクル - Onsen UI](https://ja.onsen.io/v2/guide/lifecycle.html)も見て下さい。
5
+ - 各ページの準備(init)ができてないと、CSSコンポーネント(Switchとか)の参照に失敗するようです。
6
+
6
7
  OnsenUI V2 JS Splitter ベースにSwitch関係を追記。
7
8
  **Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれで上が書いてみて下さい。**
8
9
  **ons.ready()に実験コードを追加**
@@ -25,9 +26,8 @@
25
26
  ons.ready(function () {
26
27
  console.log("start");
27
28
  console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
28
- // コメントを外すchangeトが呼び出されい?
29
+ // 正しくは別記codepenで記載のようにinit()内で記載しないグによってはエラーとる。
29
30
  // console.log(document.getElementById('pushswitch').checked);
30
- // ⇡のコメントを外すとchangeイベントが呼び出されない?
31
31
  document.getElementById('pushswitch').addEventListener('change', function (e) {
32
32
  console.log(document.getElementById('pushswitch').checked);
33
33
  });
@@ -125,7 +125,7 @@
125
125
 
126
126
  ```
127
127
 
128
- codepenでのテストコードも追加
128
+ codepenでのテストコードも追加。たぶんこれでOK
129
129
  ```html
130
130
  <!DOCTYPE html>
131
131
  <html>
@@ -140,13 +140,20 @@
140
140
  ons.ready(function () {
141
141
  console.log("start");
142
142
  console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
143
- // コメントを外すとchangeイベントの登録呼び出されない
143
+ // 各ページ初期化終わってない段階で[checked]は参照できないのでエラーになる。
144
- console.log(document.getElementById('pushswitch').checked);
144
+ // console.log(document.getElementById('pushswitch').checked);
145
- // ⇡のコメントを外すとchangeイベントの登録が呼び出されない?
145
+
146
146
  document.getElementById('pushswitch').addEventListener('change', function (e) {
147
147
  console.log(document.getElementById('pushswitch').checked);
148
148
  });
149
+ console.log("addEventListener end");
150
+ // 各ページの初期化が終わってから値を参照すること。
151
+ document.addEventListener('init', function (event) {
152
+ if (event.target.matches('#main')) {
153
+ console.log('#main');
149
- console.log(document.getElementById('pushswitch').checked);
154
+ console.log(document.getElementById('pushswitch').checked);
155
+ }
156
+ }, false);
150
157
  });
151
158
  </script>
152
159
  </head>
@@ -156,6 +163,5 @@
156
163
  <ons-switch id="pushswitch" checked></ons-switch>
157
164
  </ons-page>
158
165
  </body>
159
-
160
166
  </html>
161
167
  ```

5

追記

2019/02/27 03:52

投稿

oikashinoa
oikashinoa

スコア2826

answer CHANGED
@@ -1,4 +1,6 @@
1
1
  [onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。
2
+ `上記だけでは不十分な可能性が有ります。調査中`
3
+
2
4
  - 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
3
5
 
4
6
  OnsenUI V2 JS Splitter ベースにSwitch関係を追記。

4

codepenでのテストコードも追加

2019/02/27 03:20

投稿

oikashinoa
oikashinoa

スコア2826

answer CHANGED
@@ -121,4 +121,39 @@
121
121
  </html>
122
122
 
123
123
 
124
+ ```
125
+
126
+ codepenでのテストコードも追加
127
+ ```html
128
+ <!DOCTYPE html>
129
+ <html>
130
+
131
+ <head>
132
+ <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
133
+ <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
134
+ <script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
135
+ <meta charset="UTF-8">
136
+ <title>OnsenUI</title>
137
+ <script>
138
+ ons.ready(function () {
139
+ console.log("start");
140
+ console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
141
+ // ↓のコメントを外すとchangeイベントの登録が呼び出されない?
142
+ console.log(document.getElementById('pushswitch').checked);
143
+ // ⇡のコメントを外すとchangeイベントの登録が呼び出されない?
144
+ document.getElementById('pushswitch').addEventListener('change', function (e) {
145
+ console.log(document.getElementById('pushswitch').checked);
146
+ });
147
+ console.log(document.getElementById('pushswitch').checked);
148
+ });
149
+ </script>
150
+ </head>
151
+
152
+ <body>
153
+ <ons-page id="main">
154
+ <ons-switch id="pushswitch" checked></ons-switch>
155
+ </ons-page>
156
+ </body>
157
+
158
+ </html>
124
159
  ```

3

ons.ready()に実験コードを追加

2019/02/27 02:41

投稿

oikashinoa
oikashinoa

スコア2826

answer CHANGED
@@ -2,7 +2,8 @@
2
2
  - 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
3
3
 
4
4
  OnsenUI V2 JS Splitter ベースにSwitch関係を追記。
5
- **Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれでうわがいてみて下さい。**
5
+ **Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれでいてみて下さい。**
6
+ **ons.ready()に実験コードを追加**
6
7
  ``` HTML
7
8
  <!DOCTYPE HTML>
8
9
  <html>
@@ -19,22 +20,18 @@
19
20
  <link rel="stylesheet" href="css/style.css">
20
21
 
21
22
  <script>
22
- ons.ready(function() {
23
+ ons.ready(function () {
23
- console.log("Onsen UI is ready!");
24
+ console.log("start");
25
+ console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
26
+ // ↓のコメントを外すとchangeイベントが呼び出されない?
24
- console.log(document.getElementById("pushswitch").checked);
27
+ // console.log(document.getElementById('pushswitch').checked);
25
- console.log(document.getElementById("pushswitch2").checked);
28
+ // ⇡のコメントを外すとchangeイベントが呼び出されない?
26
-
27
- document.getElementById('pushswitch').addEventListener('change', function(e) {
29
+ document.getElementById('pushswitch').addEventListener('change', function (e) {
28
- if(document.getElementById("pushswitch").checked) {
30
+ console.log(document.getElementById('pushswitch').checked);
31
+ });
29
- console.log("checked!");
32
+ console.log(document.getElementById('pushswitch').checked);
30
- }else{
31
- console.log("nocheck");
32
- }
33
33
  });
34
34
 
35
-
36
- });
37
-
38
35
  window.fn = {};
39
36
  window.fn.open = function() {
40
37
  var menu = document.getElementById('menu');
@@ -123,4 +120,5 @@
123
120
  </body>
124
121
  </html>
125
122
 
123
+
126
124
  ```

2

追記

2019/02/27 02:38

投稿

oikashinoa
oikashinoa

スコア2826

answer CHANGED
@@ -1,7 +1,8 @@
1
1
  [onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。
2
2
  - 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
3
3
 
4
- OnsenUI V2 JS Splitter ベースにSwitch関係を追記
4
+ OnsenUI V2 JS Splitter ベースにSwitch関係を追記
5
+ **Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれでうわがいてみて下さい。**
5
6
  ``` HTML
6
7
  <!DOCTYPE HTML>
7
8
  <html>

1

追記

2019/02/27 01:51

投稿

oikashinoa
oikashinoa

スコア2826

answer CHANGED
@@ -1,4 +1,4 @@
1
- [onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)を読んで下さい。
1
+ [onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。
2
2
  - 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
3
3
 
4
4
  OnsenUI V2 JS Splitter ベースにSwitch関係を追記