templateのrenderはネストしたタグの属性に適用できますか？

[kumapo]

templateについて質問があります。
renderメソッドで2段階、3段階とネストしたタグの属性へ値を埋め込むことは
サポートしていますか？

ネストしたタグの属性に値を埋め込むとは、
jQuery('.hoge').render({
hoges:hoges,
path:path
});
とjsに書いて、gadget.xmlには
<div repeat="${hoges}" var="hoge" class="hoge">
<div class="first">
<img class="hoge_photo" src="${path+hoge.photo}"/>
<span class="hoge_id" value="${hoge.id}"></span>
</div>
<div class="second">
<form>
<textarea></textarea>
<input type="hidden" class="hoge_id" value="${hoge.id}"/>
<input class="confirm" type="button">
</form>
</div>
</div>
と書く。このような状況をさしています。

質問させていただいているのは、上の例で
.second input.hoge_idに.first span.hoge_idと異なる値が埋め込まれることがあったためです。
まだ、原因を追いきれていないので template と無関係かもしれないのですが、
そもそもtemplateでサポートしているか知りたいと思いました。

[なかじまん]

こんにちは。なかじまんです。

実際に確認はしてませんが、ネストしていても構いません。
span と input の要素で値が異なるとのことですが、値が異なるのはどちらの要素でしょうか?
また、異なると確認したのは、見た目でようか? 実際の DOM でしょうか?
input 要素であれば、ブラウザが入力を記憶していないでしょうか?

[kumapo]

なかじまんさん　kumapoです。お返事ありがとうございます。

まず値の確認方法は、firebugです。
jQuery(..).render(..)の直後にブレークして
HTMLタブで値を目視にて確認しました。

そして値が異なっているのは
.second input.hoge_idのほうです。ネストが深いほうです。
.first input.hoge_idは確認している限り 問題なく
.second .. のほうは3回に1回ほど値が期待通りでないです。

.second .. の値の変わりかたは、すべての.second input.hoge_idの値が
renderの引数hogesのhoge[0].hoge_idになってしまいます。
私が期待しているのは、input.hoge_idの値が
上からhoge[0].hoge_id , hoge[1].., hoge[2].., となってほしかったのです。

[Nobuhiro Nakajima]

本件、確認しましたが、

更新ボタンをクリックすると再現し、
アドレスバーをクリックすると再現しましせん(期待どおりになります)。

繰り返しになりますが、おそらく Firefox がフォームを記憶するのと
関係があります。form と input に ID や name を付けて区別すれば
解決するかもしれませんん。

繰り返し生成している form と input に ID や name がないため、
意図しない場所で、値が記録されてしまうのではないでしょうか?

2011/2/9 kumapo <kuma...@gmail.com>:

[なかじまん]

本件、確認したソースコードを共有します。
勘違いなどありましたら、お知らせください。:D

http://gadgets.lrlab.to.s3.amazonaws.com/playground/opensocial-jquery-97.xml

On Feb 9, 7:40 pm, Nobuhiro Nakajima <nakaji...@lrlab.to> wrote:
> 本件、確認しましたが、
>
> 更新ボタンをクリックすると再現し、
> アドレスバーをクリックすると再現しましせん(期待どおりになります)。
>
> 繰り返しになりますが、おそらく Firefox がフォームを記憶するのと
> 関係があります。form と input に ID や name を付けて区別すれば
> 解決するかもしれませんん。
>
> 繰り返し生成している form と input に ID や name がないため、
> 意図しない場所で、値が記録されてしまうのではないでしょうか?
>

> 2011/2/9 kumapo <kumapo...@gmail.com>:

[なかじまん]

kumapo さん。みなさん。理由が分かったのでお伝えします。

(1) ページをはじめて表示したときは、テンプレート記述は、次のとおりです。

<input type="hidden" class="hoge_id" value="${hoge.id}"/>

(2) テンプレートを適用すると、値が埋まります。

<input type="hidden" class="hoge_id" value="1"/>
<input type="hidden" class="hoge_id" value="2"/>
<input type="hidden" class="hoge_id" value="3"/>

(3) テンプレート記述は、そのまま1番目なので、ブラウザの更新ボタンをクリックすると、
Firefox がフォームを記憶するため、value="${hoge.id}" ではなく "1" となる。

<input type="hidden" class="hoge_id" value="1"/>

(4) このままテンプレートを適用すると、すべて "1" となる。

試していないのですが、次の方法で回避できるかもしれません。

同じテンプレートを繰り返し使う
http://code.google.com/p/opensocial-jquery/wiki/Template

On Feb 9, 8:17 pm, なかじまん <nakaji...@lrlab.to> wrote:
> 本件、確認したソースコードを共有します。
> 勘違いなどありましたら、お知らせください。:D
>

> http://gadgets.lrlab.to.s3.amazonaws.com/playground/opensocial-jquery...

[kumapo]

kumapoです。なかじまんさん、動作確認と調査ありがとうございます！

遅レスですみません。
同じテンプレートを使うのはまだ試せていないのですが
formにidを指定した場合で動作確認してみました。

結論から言うと、firefoxがフォームの値を補完し
期待を裏切る動作になりました。
これは、formのid値に${hoge}を用いたためだと思います。

<div repeat="${hoges}" var="hoge" class="hoge">
<div class="first">
<img class="hoge_photo" src="${path+hoge.photo}"/>
<span class="hoge_id" value="${hoge.id}"></span>
</div>
<div class="second">

<form id="form_${hoge.id}">

<textarea></textarea>
<input type="hidden" class="hoge_id" value="$

{hoge.id}" id="hidden_${hoge.id}"/>

<input class="confirm" type="button">
</form>
</div>
</div>

* 結果 *
.first span.hoge_id=14
.second form の属性idの値=form_14
.second input.hoge_id の属性idの値 hidden_14
.second input.hoge_id の属性valueの値 34(期待と異なる値)

そのほか、input[type="hidden"]の属性valueの代わりに spanの属性valueを用いた場合は
常に期待どおりの動作となりました。
こちらの方法でなんとか アプリを修正できそうです。

On 2月9日, 午後8:48, なかじまん <nakaji...@lrlab.to> wrote:
> kumapo さん。みなさん。理由が分かったのでお伝えします。
>
> (1) ページをはじめて表示したときは、テンプレート記述は、次のとおりです。
>
> <input type="hidden" class="hoge_id" value="${hoge.id}"/>
>
> (2) テンプレートを適用すると、値が埋まります。
>
> <input type="hidden" class="hoge_id" value="1"/>
> <input type="hidden" class="hoge_id" value="2"/>
> <input type="hidden" class="hoge_id" value="3"/>
>
> (3) テンプレート記述は、そのまま1番目なので、ブラウザの更新ボタンをクリックすると、
> Firefox がフォームを記憶するため、value="${hoge.id}" ではなく "1" となる。
>
> <input type="hidden" class="hoge_id" value="1"/>
>
> (4) このままテンプレートを適用すると、すべて "1" となる。
>
> 試していないのですが、次の方法で回避できるかもしれません。
>

> 同じテンプレートを繰り返し使うhttp://code.google.com/p/opensocial-jquery/wiki/Template