Go to Qiita Advent Calendar 2024 Top
LoginSignup
rempei
@rempei

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

変数の内容がURLに反映されない

Q&A

Closed

JavaPlayFramework

解決したいこと

下記に詳しく記載します。

Windows　10
Play　　 1.4.5

発生している問題・エラー

エラーは特になし

該当するソースコード

    #{list items:partners, as:'monstar'}
      <div data-name="${monstar.name}">
        ${monstar.name}:Lv.${monstar.level}
      </div>
    #{/list}

data-nameの中身は"ゴリラまん"、この要素をクリックすると
const selectedName = event.target.dataset.name;
でそれを取得(この時点でconsole.log(selectedName)とすると正常にゴリラまんと表示される)、
selectedNameを使って
const url = `/detail/${selectedName}`;
console.log("urlは" + url + "だよ");
のようにurlを作り表示すると
urlは/detail/だよと表示されてしまい
selectedNameが表示されません

なぜselectedNameが反映されないのか分かる方がいらっしゃいましたら教えてほしいです。

0

2Answer

Verclene
@Verclene

Play 1系では変数展開に${...}を使っていました.これはJavaScriptの仕様と衝突します.JavaScriptで解釈されるべき部分がサーバーレンダリング時に潰されているので,正しいコードが出なくなります.

通常JavaScriptファイルはこうしたことを避けるため,別ファイルにして読み込むのが最善ですが,どうしてもHTML中に一緒に出力しないといけない場合はこういった事象に注意してください.

3Like

Comments

  1. @Verclene

    よほどのことがないかぎりPlay Frameworkは最新版を使用することを推奨しますが,2.xはScalaの導入でいろいろ互換のないところが多いようですので,使いづらいようならフレームワークをSpringとかに変えた方がいいかもしれません.Javaにこだわる理由がないのならそちらでも.

  2. @rempei

    Questioner

    わかりました！ありがとうございます。

HalHarada
@HalHarada

未回答なので、一言

#{/list}
const url = `/detail/${selectedName}`;
console.log("urlは" + url + "だよ");

このバッククォートは意識的に用いていますか？
それとも、javascript言語に引っ張られていませんか？javaのコメントは//でconsole.logはjavaにはないのでは？

javascriptではバッククォートを

const url  = `
   /detail/${selectedName}
`

のように用います。${···}には桜木のシューズか!なんて突っ込むことはしません。

PlayFrameworkであることを失念してました。

#{list}で定義されているのは${selectedName}ではありえません。

あわてず、別のフレームワークを選んではどうでしょう?

2Like

Comments

  1. @rempei

    Questioner

    ご回答ありがとうございます。

    バッククォートはurlに変数を入れる方法を調べたらテンプレートリテラルで埋め込むということが分かったので使っています。

    #{list}で定義されているのは${selectedName}ではありえません。
    とはどういうことでしょうか？

  2. @HalHarada

    scala言語からjavacsripへトランスパイルしているのですか？

    java,PlayFrameworkにとらわれていました。

  3. @rempei

    Questioner

    Scalaは使っていません

  4. @HalHarada

    日本語のコメントがごちゃまぜで理解できていなかったようです。
    htmlレンダリングでplayとjavacsriptが表記されているようにやっとみえました。

    const selectedName = event.target.dataset.name;

    この時点でJavaScriptでselectedNameはJavaScriptの変数です。

    const url = `/detail/${selectedName}`;

    これもJavaScriptなので${selectedName}はサーバ側でレンダリングしなくてはいけません。よって、空欄となります。事象通り。

    const url = '/detail/' + selectedName ;

    これは純粋なJavaScriptです。

  5. @rempei

    Questioner

    見づらくて申し訳ないです。めちゃくちゃ解決しました！　ありがとうございました。

    ちなみになんですけど

    const url = '/detail/' + selectedName ;

fetch(url)　.....

    で上記のような感じでfetch()を使おうとしたときのルーティング設定を

    GET 　　　　　 /detail/{encodedName} 　　　　　　 Edit.detail

    コントローラーメソッドは

     public static void detail(String name) {
    User selectedName = User.find("name = ?", name).first();
　　System.out.println("クリックした名前: " + name);
    Gson gson = new Gson();
    String json = gson.toJson(selectedName);
    renderJSON(json);
  }

    このように書くとencodedNameの値がdetailの引数に渡され、
    その引数をもとにdata.ymlで検索をかけてselectedNameを取得し
    renderJSON()でレンダリングする
    という風に習ったのですがあっているでしょうか？

    引数に渡されたはずのnameがnullになってしまいます。

    クリックした名前: null

Your answer might help someone💌

LoginSign Up