質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • JavaScript

    17055questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6942questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Cordova

    431questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

DOMを変更したが、画面に反映されない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 586

 前提・質問

アプリ画面(HomeView)と設定画面(SettingView)の2つの画面のアプリをSPAで作成しています。
設定画面の設定内容は、localstrageで永続化します。
アプリ画面→設定画面の遷移時に、localstrageから取得した内容を
設定画面に反映させたいと考えています。

上記、実現・実装はできたものの、頭の中のイメージと実装が
乖離しており、問題点、より良い方法があればご教示いただきたいです。

具体的には、設定画面反映の処理をSettingViewに実装した方が、
直感的と考えていますが、それだとDOMの描画前らしく、いくらDOMを変更しても、
画面に反映できません。描画後(slider.slidePage()後)に反映処理を
実装することで実現できてはいます。

 該当のソースコード

app.js

(function() {
    HomeView.prototype.template = Handlebars.compile($("#home-tpl").html());
    SettingView.prototype.template = Handlebars.compile($("#setting-tpl").html());

    var slider = new PageSlider($('body'));
    router.addRoute('', function() {
      slider.slidePage(new HomeView().render().$el);
    });
    router.addRoute('setting', function() {
        slider.slidePage(new SettingView().render().$el);
    });
    //localstrageから設定内容取得し、画面に反映
    var json = window.localStorage.getItem("hoge");
    var array = [];
    if (json) {
        $('.tax-active').removeClass("tax-active");
        array = JSON.parse(json);
        var e = $('[data-tax-rate="' + array['setTax'] + '"]');
        e.addClass("tax-active");
    } else {
        //省略
    }
    router.start();
}());

SettingView.js

var SettingView = function() {
    this.initialize = function() {
        this.$el = $('<div/>');
        // 省略
        // ここに変更処理を実装しても、
        // 画面に反映されない。
    };

    this.render = function() {
        this.$el.html(this.template());
        return this;
    };

   this.initialize();
}


index.html

<!DOCTYPE html>
<head>
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/main320_959.css" media="screen </head>
    <title>XXXXXX</title>
</head>
<body>
<script id="home-tpl" type="text/template">
    <div id="container" class="content">
      <!-- 省略 -->
    </div>
</script>
<script id="setting-tpl" type="text/template">
    <div id="container2" class="content">
        <a href="#">戻る</a>
        <div id="setTax">
            <button id="setTaxBtn5" data-tax-rate="0.05">5%</button>
            <button id="setTaxBtn8" class="tax-active" data-tax-rate="0.08">8%</button>
            <button id="setTaxBtn10" data-tax-rate="0.1">10%</button>
        </div>
        <!-- 省略 -->
        <div id=save>
            <button id="saveBtn">保存</button>
        </div>

    </div>
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/jquery.js"></script>
<script src="lib/handlebars.js"></script>
<script src="lib/pageslider.js"></script>
<script src="lib/router.js"></script>
<script src="lib/fastclick.js"></script>
<script src="js/HomeView.js"></script>
<script src="js/SettingView.js"></script>
<script src="js/service/StrageService.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

 補足情報(FW/ツールのバージョンなど)

Apache Cordovaのチュートリアルをベースに実装しています。
PageSliderはサードパーティー製のものです。

PageSliderの入手元:
codovaのチュートリアル
Module 3: Setting Up the Workshop Filesからダウンロードしています。
libフォルダ配下のpageslider.jsです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • naomi3

    2018/05/04 17:31

    状況を再現できるように、PageSliderの入手元やHTMLを提供して下さい。 router.addRoute('setting', function() { slider.slidePage(new SettingView().render().$el); }) のコールバックは動いていますか?

    キャンセル

  • treasurehunterv

    2018/05/05 10:17

    PageSliderの入手元を質問本分に追記しました。コールバックの件は、正直理解できていないです。#settingを叩くとslider.slidePage(new SettingView().render().$el);が実行される(デバックできる)ことは確認しています。

    キャンセル

まだ回答がついていません

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17055questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6942questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Cordova

    431questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。