前提として、以下の環境で問題なくSPAの挙動が実現しているとします。
・routeChangeCompleteイベントで、URL変更完了時に、カルテのview()が実行される。
・カルテの接客がview()実施後、動いている
そのうえで、表題のご質問です。
事象の詳細
JS側で、widget.setVal(“items”, showItems);のように、showItemsを変数itemsに配列として値を渡すという操作をしています。
そこで、html側では、以下のように、for文で展開したいために、変数itemsを以下のように処理をさせていますが、どうやらhtml側に変数itemsがわたっていないようで、for文を展開できません。
<div class="karte-temp-favorite-item" krt-for="item in items">
実際に検証してみたところ、
JS内では、 widget.getVal(“items”,“items”);のように変数取得をしたところ、itemsを取得できていましたが、
html側で、 {{items}}のようにしても、何も表示されませんでした。
→html上での実際の記述
<div class="karte-temp-favorite-items">
<div class="karte-temp-favorite-item" krt-for="item in items">
<span>{{items}}</span>
・・・以下省略
・JS内の変数展開（コンソールに表示された）
・html内での変数展開（何も表示されない）
この結果から、SPA環境では、widget.API内のwiget.setValで、JSからhtml側に値を渡すことができないのではないかと思いました。
ちなみに、リロードすると、問題なくhtml側に値がわたり表示さるため、SPA上での遷移時に特有の挙動となっています。
この認識はあっていますでしょうか？
SPA環境では、widget.API内のwiget.setValで、JSからhtml側に値を渡すことができないのではないか
少なくともこういった仕様は存在しないですね・・
jsの変数「showItems」を「どのように作っているか」に依存して、
値を渡すのが間に合っていない、といった問題ではと想像します。
showItemsに固定の値を渡すコードにしてテストしてみてはいかがでしょうか。
「いいね！」 1
ありがとうございます！
jsの変数「showItems」を「どのように作っているか」に依存して、
値を渡すのが間に合っていない、といった問題ではと想像します。
showItemsの変数に値をセットするのに時間を要すのですが、リロードなどSPAではない環境では、問題なく値がわたるのに対し、SPAの場合にわたらないという事象が起きてしまいます。
SPAの場合には、通常よりも処理に時間を要すなどが起きているのかもしれないため、テストしてみたいと思います。
またご相談させていただくかもしれません。
よろしくお願いいたします。
テストで軽いデータを渡してみたのですが、やはりデータがわたりませんでした。
htm側
<p class='krt-url'>{{url}}<p/>
js側
widget.show();
var data = location.href;
widget.setVal('url',data);
widget.getVal('url');
console.log('url',url);
var krtElm = document.querySelector('.krt-url');
console.log('krtElm',krtElm);
//カルテSPAの処理
var hideEventHandler = function(){
widget.hide();
document.removeEventListener('reactRouteChangeStart',hideEventHandler);
};
document.addEventListener('reactRouteChangeStart',hideEventHandler);
ほかのSPAサイトで検証してみたところ、
データがわたるページとそうでないページがあることがわかりました。
タグの発火状況やイベントの発火状況、順番などは同じであったため、それらが原因ではないようです。
ページによって異なるとした場合、ページ上の処理などの影響で、スクリプトやAPIの処理に影響が出ていることなどが考えられると思ったのですが、そのようなことは考えられますでしょうか？
widget.setVal(‘url’,data);
解決になるかわかりませんが・・
上記のsetValに関する定義だけ、widget.show()の手前に移動してみてはいかがでしょうか？
showした時点で変数が存在していないと、エラーを起こす可能性があるなと思いました。
「いいね！」 1
ありがとうございます。
ご提案いただいた方法を採用したのですが、
解消されなかったので、
widget.setVal()は使わない方法で実装を進めることにいたします。
ご対応いただきありがとうございました！
「いいね！」 1
