22578


現在、monacaでmbaasを使ってデータを取得しています。  
取得しているデータは画像データと文字データです。アプリの仕様上、ons-sliding-
menuを使って作成を行っているのですが、スライドメニューを開いて戻ると、なぜか取得した画像データと文字データが消えてしまいます。理由がわからなくて困っています。  
わかる方がいればご教授よろしくお願いします。

[code]

    コードをここに入力
    index.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">
       <script src="js/ncmb-2.0.0.min.js"></script>
         <script>
           ons.bootstrap();
         </script>
           <script>
               var appKey    = "key";
               var clientKey = "key";
               var applicationID = "id";
               var ncmb = new NCMB(appKey,clientKey);
               function getShopDetail(shopId) {   
                 var ShopClass = ncmb.DataStore("news");
                 ShopClass.fetchById(shopId)
                 .then(function(news) {
                  $("#shopName").text(news.get("bun"));
                  $("#shopImage").attr("src" , "https://mb.api.cloud.nifty.com/2013-09-01/applications/" + applicationID + "/publicFiles/" + news.get("image"));
                  })
                   .catch(function(error) {
                   alert(error.message);
                  }); 
                  }
                  getShopDetail("id1");
           </script>
     </head>
       <body>
         <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
         </ons-sliding-menu>
       </body>
    </html>
    
    
    home.html
    
    <ons-navigator>
     <ons-page>
      <ons-toolbar>
       <div class="left">
            <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()">
            <ons-icon icon="bars"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center">home</div>
      </ons-toolbar>
    
            <div align="center">
               <img id="shopImage" src="" height="200" width="150"></img>
            </div>
            <div id="shopName"></div>
     </ons-page>
    </ons-navigator>
    
[/code]


CC BY-SA 3.0
2016-02-25T12:34:09.823
22540
2016-02-26T17:34:58.050
2016-02-26T10:55:47.793
13367
13367
question
javascript monaca
monacaでons-sliding-menuを使うとmbaasの取得したデータが消える


`#shopName`と`#shopImage`の書き換えは最初に`home.html`を表示させた場合のみで、スライドメニューから`home.html`を選択すると、`#shopName`と`#shopImage`の書き換えが行われないため、何も表示されません。  
つまり、現在のやり方では`JavaScript`のコードは最初の一度のみ実行され、以降は実行されないということになります。

mBaaSの環境がないので、簡易的な処理でサンプルコードを書きました。  
`AngularJS`を使用し、`home.html`を表示させるごとに`#shopName`と`#shopImage`を書き換えを行います。

＊JS/CSSコンポーネントの追加と削除で`jQuery`を追加。

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">
        <script>
            var app = ons.bootstrap("myApp", ["onsen"]);
            app.controller("homeController", ["$scope", function($scope) {
                ons.ready(function() {
                    // 取得処理
                    $("#shopName").text("こんにちは");
                    $("#shopImage").attr("src", "https://www.google.co.jp/images/nav_logo242.png");
                });
            }]);
        </script>
    </head>
    <body>
        <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" side="left" type="overlay" max-slide-distance="200px">
        </ons-sliding-menu>
    </body>
    </html>
    
[/code]

home.html

[code]

    <ons-navigator>
        <ons-page ng-controller="homeController">
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()">
                    <ons-icon icon="bars"></ons-icon></ons-toolbar-button>
                </div>
                <div class="center">home</div>
            </ons-toolbar>
            <div align="center">
                <img id="shopImage" src="" height="200" width="150"></img>
            </div>
            <div id="shopName"></div>
     </ons-page>
    </ons-navigator>
    
[/code]


CC BY-SA 3.0
2016-02-26T17:22:32.647
22578
2016-02-26T17:34:58.050
2016-02-26T17:34:58.050
9566
9566
22540
answer