Question

我正在编写一个基本的食谱组织应用程序，我希望能够使用Ajax动态地将其他项添加到成分列表中。

这是一种<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>

最好的方法（使用原型和scriptaculous）将此<fieldset>的其他副本与随附的JavaScript一起添加到页面中，确保每个副本都有唯一的ID？

Answer 1

如果您已经拥有一个漂亮的html模板，最简单的方法是使用正则表达式将模板ID转换为唯一ID，将模板html注入文档中的正确位置，然后评估脚本。 Prototype的Element.insert函数完成了为您注入html和评估脚本的所有工作。

所以说你有一个名为ingredient_template的隐藏div中的模板，并且用XXX标记了所有需要唯一ID的地方：

<div id="ingredient_template" style="display:none;">
    <fieldset id="ingredient_item_XXX">
        Ingredient <input id="ingredient_XXX" type="text" size="20" />
        <div id="ingredient_list_XXX" style="" class="autocomplete"></div>
        ...
    </fieldset>
</div>

并说你想将它添加到ingredients_list元素：

<div id="ingredients_list"></div>
<button type="button" onclick="addIngredient()">Add Ingredient</button>

您可以使用此javascript函数查找模板，将XXX替换为下一个成分编号，然后将其插入ingredients_list：

var ingredientCount = 0;
function addIngredient() {
    var html = $("ingredient_template").innerHTML.replace(/XXX/g, ingredientCount++);
    $("ingredients_list").insert(html);
}

Answer 2

仅供参考使用原型为没有ID的元素分配唯一ID的最佳方法是使用：

$('element').identify();

在您正在做的事情的背景下，我个人会利用Prototype的Template功能将代码转换为这样的代码：

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)
}

贾斯汀的代码没有任何错误，只是为了表明总是有很多方法来实现同样的事情。在您的情况下，只有一个变量可以操作，但由于模板允许多次替换，因此它们可以是多个正则表达式替换的更优雅的解决方案。

如何使用原型和scriptaculous动态添加和删除<fieldsets>？</fieldsets>

2 个答案: