22501


MonacaでOnsen UIを用いて開発しています。

アプリ画面上部右端にあるアイコンをタップすると、  
setting.html  
というページをpushPageするようにコーディングしています。

setting.htmlへ遷移した際に、setting.htmlにあるons-switchの初期状態を  
データベースから読み込んだ値にしたいのですが、  
反映させるタイミング、方法がイマイチわからず  
ご教示いただければと思います。

過去スレによると、pushPage先で何かするときにはpushPage元でons.readyを使ったり、  
AngularJSを使うのかな…となんとなく思っているのですが。。。

ちなみに、記載したコードには記述がありませんが、  
データベースからの読み込みは、top.htmlにインクルードしたjsの中で、  
ajaxを用いてjsonで取得しています。  
(値が正常に取得できていることは確認済み)

以下、コード。

**index.html**

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
        <script src="lib/onsen/js/angular/angular.js"></script>
        <script src="lib/onsen/js/onsenui.js"></script>
        <script src="js/ncmb-2.0.0.min.js"></script>
        <script src="js/login.js"></script>
        <!-- <script></script> -->
        <script>
            ons.bootstrap();
        </script>
    </head>
    <body>
        <ons-navigator var="myNavigator" id="navi" page="login.html"></ons-navigator> 
    </body>
    </html>
    
[/code]

**login.html**

[code]

    <ons-page>
        <div class="login-form"><br><br>
            <input type="email" id="email" class="text-input--underbar" placeholder="メールアドレス" value="">
            <input type="password" id="password" class="text-input--underbar" placeholder="パスワード" value="">
            <br>
            <ons-button modifier="large" class="login-button" Onclick="login();" >ログイン</ons-button>
            <br><br>
        </div>
        <div id="message" class="login-message"></div>
    </ons-page>
    
[/code]

**top.html**

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
        <script src="lib/onsen/js/angular/angular.js"></script>
        <script src="lib/onsen/js/onsenui.js"></script>
        <script src="js/ncmb-2.0.0.min.js"></script>
        <!-- <script></script> -->
        <script>
            ons.bootstrap();
        </script>
    </head>
    <body>
        <ons-navigator var="myNavigator" id="navi">
            <ons-page>
                <ons-toolbar>
                    <div class="left"><ons-back-button>Back</ons-back-button></div>
                    <div class="center"></div>
                    <div class="right"><ons-icon icon="ion-navicon" class="tab-setting" onclick="myNavigator.pushPage('setting.html')"></div>
                </ons-toolbar>
                <ons-list>
                    <ons-list-item modifier="chevron" class="top-list-item-container">
                        <div class="top-list-item-left">
                            <img src="" class="product-img">
                        </div>
                        <div class="top-list-item-right">
                            <div class="top-list-item-content">
                                <div class="product-name">あいうえお</div>
                                <div class="devuser-name">鈴木一郎</div>
                                <div class="last-send">更新日：2016/01/08 11:11</div>
                            </div>
                        </div>
                    </ons-list-item>
                    <ons-list-item modifier="chevron" class="top-list-item-container">
                        <div class="top-list-item-left">
                            <img src="" class="product-img">
                        </div>
                        <div class="top-list-item-right">
                            <div class="top-list-item-content">
                                <div class="product-name">かきくけこ</div>
                                <div class="devuser-name">鈴木二郎</div>
                                <div class="last-send">更新日：2016/01/07 11:11</div>
                            </div>
                        </div>
                    </ons-list-item>
                </ons-list>
            </ons-page>
        </ons-navigator>
    </body>
    </html>
    
[/code]

**setting.html**

[code]

    <ons-page>
      <ons-toolbar>
        <div class="left"><ons-back-button></ons-back-button></div>
        <div class="center">設定</div>
      </ons-toolbar>
      <div class="settings-header">プッシュ通知</div>
        <ons-list modifier="inset" class="settings-list">
            <ons-list-item>プッシュ通知<ons-switch modifier="list-item"></ons-switch></ons-list-item>
        </ons-list>
    </ons-page>
    
[/code]


CC BY-SA 3.0
2016-02-23T04:07:07.697
22421
2016-03-26T04:37:53.413
13592
question
monaca onsen-ui
pushPage先にあるons-switchを、動的に操作したい


PageがPushされる時に"prepush"というイベントが発生します。  
<http://ja.onsen.io/guide/overview.html#EventHandling>

ons-switchにvar属性を付けてJavaScriptから使えるようにして、  
setCheckedメソッドでDBから読み込んだ値を設定するとよいかと。  
<http://ja.onsen.io/reference/ons-switch.html>

（追記）  
使用するイベントはprepushでなくpostpushでした。すみません。  
またはons-pageの初期化が完了すると発生するpageinitイベントで。


CC BY-SA 3.0
2016-02-25T02:27:31.817
22501
2016-02-25T03:42:09.480
2016-02-25T03:42:09.480
13314
13314
22421
answer