2

基本的なレシピ編成アプリケーションを作成していますが、Ajaxを使用して材料のリストに追加のアイテムを動的に追加できるようにしたいと考えています。

これは1つの成分がどの<fieldset>ように見えるかです：

<fieldset id="ingredient_item_0">
    Ingredient <input id="ingredient_0" type="text" size="20" />
    <div id="ingredient_list_0" style="" class="autocomplete"></div>

    Amount <input id="amount_0" type="text" size="5" />

    Unit <input id="unit_0" type="text" size="20" />
    <div id="unit_list_0" class="autocomplete"></div>

    Notes <input id="notes_0" type="text" size="20" />

    <script type="text/javascript">
        new Ajax.Autocompleter('ingredient_0','ingredient_list_0','ingredients.php', {'method':'get', 'paramName': 't'});
        new Ajax.Autocompleter('unit_0','unit_list_0','units.php', {'method':'get', 'paramName': 't'});
    </script>
</fieldset>

<fieldset>これのコピーを付随するJavaScriptとともにページに追加して、それぞれが一意のIDを持っていることを確認するための（プロトタイプとscriptaculousを使用した）最良の方法は何ですか？

4

2 に答える 2

1

参考までに、プロトタイプでIDのない要素に一意のIDを割り当てる最良の方法は、次を使用することです。

$('element').identify();

あなたがしていることの文脈では、個人的に私はコードを次のようなものに変換するプロトタイプのテンプレート機能を利用します：

var myTemplate = new Template('<div id="ingredient_template" style="display:none;">'+
                              '<fieldset id="ingredient_item_#{num}">'+
                              'Ingredient <input id="ingredient_#{num}" type="text" size="20" />'+
                              '<div id="ingredient_list_#{num}" style="" class="autocomplete"></div>'+
                              '</fieldset>'+
                              '</div>');


function addIngredient(){
  ingredientCount ++;
  var vals = {num: ingredientCount};
  var htmlstr = myTemplate.evaluate(vals);
  $('ingredients_list').insert(htmlstr)
}

ジャスティンのコードには何の問題もありません。同じことを達成する方法が常にたくさんあることを示すためです。あなたの場合、操作する変数は1つだけですが、テンプレートでは複数の置換が可能であるため、複数の正規表現の置換よりもはるかに洗練されたソリューションになります。

于 2009-09-05T19:15:13.947 に答える