OnsenUiの挙動について

簡単にまとめますと、ページ移動時に、ons-tabbar内に設置した別のons-tabbar内の要素がリロードされてしまい困っています

言いたい事がさっぱりだと思うので必要箇所のみ記載したコードをのせます。

index

<script>
function reload(){...}//IDが"ITSTABLE"の要素を書き換えています。
</script>
<ons-navigator  page="./login.html" var ="page"></ons-navigator>

<ons-navigator page="login.html"></ons-navigator>   
<ons-template id="login.html" >   

<ons-page>
    <ons-tabbar position="bottom" >
      <ons-tab  page="login1.html" active></ons-tab>
    </ons-tabbar>

<ons-template id="login1.html">
<ons-page>
<ons-button onclick=" page.bringPageTop('main.html',{callback:function(){reload();},refresh:true});">Log In</ons-button>
</ons-page>
</ons-template>
..

main

<ng-include src="'main.html'" ></ng-include>
<ons-template id="main.html">
<ons-page>
 <ons-list> 
    <ons-tabbar position="bottom">
      <ons-tab page="page1.html" active></ons-tab>
    </ons-tabbar>
 </ons-list> 
</ons-page>
</ons-template>

page1

<ng-include src="'page1.html'" ></ng-include>
<ons-template id="page1.html">

<ons-page>
    <ons-list>
    <ons-tabbar position="top">
      <ons-tab page="page2.html" no-reload persistent  active="true"></ons-tab>
    </ons-tabbar>
    </ons-list>



<ons-template id="page2.html">
    <ons-page>
            <ons-list id="ITSTABLE">//ここを書き換えます。
            </ons-list>   
    </ons-page>
</ons-template>

...

以上のようなページ関係でして

最初のページLoad時は正常に動きます、しかし、１度popPageを行い、再度bringPageTopをした場合、【ITSTABLE】内の要素を書きかえることが出来ません。

色々した結果。

loginページからmain内の(page1)ページを読み込んだ際には要素の中身を書き換える事は出来ましたが、page2の要素は書き換える事が出来ませんでした、（page1内のons-tabbarが新しい要素として読み込まれている、ここを新しく読み込むのではなく、再度同じ要素として読み込みたい。）

しかし、リファレンスにはons-tabbarの再読み込み時は前回と同じ要素を使用する、、といったメソッドがないので悪戦苦闘しております。。

アドバイスお願いいたします。。

akabee

2017/06/02 03:15 編集

seriさんの質問の要点が分かりません。やりたいことと、現状の動きと、上手くいっていないと認識されている動作について整理しましょう。次の内容で質問の認識は合いますか。■やりたいことの予想（私に伝わっている範囲での私の認識）：Login.html→{birngPageTop}→main.htmlのons-tab内のpage1.html内のpage2.html→{popPage}→Login.html→{birngPageTop}→main.htmlのons-tab内のpage1.html内のpage2.htmlと遷移したときに、page2.htmlの要素をJavaScriptで操作したい。■現状の動きの予想：Login.html→{birngPageTop}→main.htmlのons-tab内のpage1.html内のpage2.htmlと初期読み込みした際、page1.htmlもpage2.htmlも想定どおりに操作できる。ただし、Login.html→{birngPageTop}→main.htmlのons-tab内のpage1.html内のpage2.html→{popPage}→Login.html→{birngPageTop}→main.htmlのons-tab内のpage1.html内のpage2.htmlとpopPageを実行した場合、２度目の読み込み時にpage1.htmlの要素は操作できるが、page2.htmlの要素を操作することができない。■上手くいっていないと認識している動作の予想：２度目のmain.htmlのons-tab内のpage1.html内のpage2.htmlの読み込み時に何かが上手くいっていないと認識している。２度目の読み込み時にも、初期読み込み時と同じように処理が実行されるようにしたい。

行動規範の内容に同意します

回答1件

ベストアンサー

【ITSTABLE】内の要素を書きかえることが出来ません。

という部分が引っかかったので試したところ、

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/css/onsenui.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/css/onsen-css-components.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/js/onsenui.js"></script>
<!--
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
-->
</head>
<body>

<ons-navigator page="login.html" id="page"></ons-navigator>
<ons-template id="login.html">
	<ons-page>
		<ons-tabbar position="bottom">
			<ons-tab label="login" page="login1.html" active></ons-tab>
		</ons-tabbar>
	</ons-page>
</ons-template>

<ons-template id="login1.html">
	<ons-page>
		<ons-button onclick="page.bringPageTop('main.html', {callback:reload});">Log In</ons-button>
	</ons-page>
</ons-template>

<ons-template id="main.html">
	<ons-page>
		<ons-list> 
			<ons-tabbar position="bottom">
				<ons-tab label="main" page="page1.html" active></ons-tab>
			</ons-tabbar>
		</ons-list> 
	</ons-page>
</ons-template>

<ons-template id="page1.html">
	<ons-page>
		<ons-list>
			<ons-tabbar position="top">
				<ons-tab label="page1" page="page2.html" active></ons-tab>
			</ons-tabbar>
		</ons-list>
	</ons-page>
</ons-template>


<ons-template id="page2.html">
	<ons-page>
		<ons-toolbar>
			<div class="left"><ons-back-button>Back</ons-back-button></div>
		</ons-toolbar>
		<ons-list id="ITSTABLE">
		</ons-list>
	</ons-page>
</ons-template>

</body>
<script>
ons.ready(function() {
});
var i = 0;
function reload() {
	var it = document.querySelector('#ITSTABLE');
	it.innerHTML = "<ons-list-item tappable>Tap me" + i + "</ons-list-item>";
	i++;
}
</script>
</html>

で変更できるのは確認しましたが、いかがでしょうか。

投稿2017/06/02 02:55