前提・質問
アプリ画面(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です。
あなたの回答
tips
プレビュー