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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Cordova

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

JavaScript

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

jQuery

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

Q&A

0回答

732閲覧

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

treasurehunterv

総合スコア27

Cordova

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

JavaScript

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

jQuery

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

0グッド

2クリップ

投稿2018/05/03 20:21

編集2022/01/12 10:55

前提・質問

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

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

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

該当のソースコード

app.js

javascript

1(function() { 2 HomeView.prototype.template = Handlebars.compile($("#home-tpl").html()); 3 SettingView.prototype.template = Handlebars.compile($("#setting-tpl").html()); 4 5 var slider = new PageSlider($('body')); 6 router.addRoute('', function() { 7   slider.slidePage(new HomeView().render().$el); 8 }); 9 router.addRoute('setting', function() { 10 slider.slidePage(new SettingView().render().$el); 11 }); 12 //localstrageから設定内容取得し、画面に反映 13 var json = window.localStorage.getItem("hoge"); 14 var array = []; 15 if (json) { 16 $('.tax-active').removeClass("tax-active"); 17 array = JSON.parse(json); 18 var e = $('[data-tax-rate="' + array['setTax'] + '"]'); 19 e.addClass("tax-active"); 20 } else { 21 //省略 22 } 23 router.start(); 24}());

SettingView.js

javascript

1var SettingView = function() { 2 this.initialize = function() { 3 this.$el = $('<div/>'); 4 // 省略 5 // ここに変更処理を実装しても、 6 // 画面に反映されない。 7 }; 8 9 this.render = function() { 10 this.$el.html(this.template()); 11 return this; 12 }; 13 14 this.initialize(); 15}

index.html

html

1<!DOCTYPE html> 2<head> 3 <meta name="format-detection" content="telephone=no"> 4 <meta name="msapplication-tap-highlight" content="no"> 5 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 6 <link rel="stylesheet" type="text/css" href="css/main320_959.css" media="screen </head> 7 <title>XXXXXX</title> 8</head> 9<body> 10<script id="home-tpl" type="text/template"> 11 <div id="container" class="content"> 12 <!-- 省略 --> 13 </div> 14</script> 15<script id="setting-tpl" type="text/template"> 16 <div id="container2" class="content"> 17 <a href="#">戻る</a> 18 <div id="setTax"> 19 <button id="setTaxBtn5" data-tax-rate="0.05">5%</button> 20 <button id="setTaxBtn8" class="tax-active" data-tax-rate="0.08">8%</button> 21 <button id="setTaxBtn10" data-tax-rate="0.1">10%</button> 22 </div> 23 <!-- 省略 --> 24 <div id=save> 25 <button id="saveBtn">保存</button> 26 </div> 27 28 </div> 29</script> 30<script type="text/javascript" src="cordova.js"></script> 31<script type="text/javascript" src="lib/jquery.js"></script> 32<script src="lib/handlebars.js"></script> 33<script src="lib/pageslider.js"></script> 34<script src="lib/router.js"></script> 35<script src="lib/fastclick.js"></script> 36<script src="js/HomeView.js"></script> 37<script src="js/SettingView.js"></script> 38<script src="js/service/StrageService.js"></script> 39<script type="text/javascript" src="js/app.js"></script> 40</body> 41</html> 42

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

naomi3

2018/05/04 08:31

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

2018/05/05 01:17

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問