0

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

コードをここに入力
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>
6
  • スライドメニューを開いて戻るというのは、メニューで選択した画面を表示させたという意味ですか?
    – otak-lab
    Commented 2016年2月25日 13:14
  • 説明足らずですみません。 例えば、最初に開かれるページがhome.htmlとしてここにmbaasから取得した画像データと文字データを表示させます。次にons-toolbarにあるメニューボタンを押してsliding-menuを表示させて、またhome.htmlに遷移させます。そうするとmbaasから取得した画像データと文字データが表示されず何もない状態となります。
    – donadesu
    Commented 2016年2月25日 14:14
  • AngularJSを使っていますか?
    – otak-lab
    Commented 2016年2月25日 22:38
  • AngularJSは使っていないです。これが何か関係しているのですか?
    – donadesu
    Commented 2016年2月26日 8:22
  • AngularJSであれば解決できたかなと思っただけです。実際のコードか現象が再現できるコードを記載していただかないと難しいかと思います。
    – otak-lab
    Commented 2016年2月26日 8:47

1 件の回答 1

0

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

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

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

index.html

<!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>

home.html

<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>
2
  • 迅速な対応ありがとうございました。oTak様のおかげで解決できました。 マナー違反ですみませんが、oTak様の知識量がすごいため別件のことでどうしても知りたくて質問したいことがあります。 mbaasと広告を使ってアプリを作成していまして、どうしてもインタースティシャル広告を表示したいと考えてます。広告サイトはnendとか、appc cloudなり色々なサイトを試しましたが、mbaasと広告のプラグインが悪さをしてしまい、ビルドができない状態となります。プラグインをしないで、mbaasとインタースティシャル広告は使えることは可能でしょうか?また、monacaと相性の良さそうな広告サイトはありそうですか? すみませんがよろしくお願いします。
    – donadesu
    Commented 2016年2月27日 11:28
  • monacaでnendを使って広告表示の方法に書きます。
    – otak-lab
    Commented 2016年2月27日 15:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。