2

我正在编写一个基本的配方组织应用程序，我希望能够使用 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？

4

2 回答 2

2

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

因此，假设您将模板放在一个名为 的隐藏 div 中ingredient_template，并且您将所有需要唯一 id 的地方标记为XXX：

<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 函数来查找模板，将XXXs 替换为下一个成分编号，然后将其插入ingredients_list：

var ingredientCount = 0;
function addIngredient() {
    var html = $("ingredient_template").innerHTML.replace(/XXX/g, ingredientCount++);
    $("ingredients_list").insert(html);
}
于 2009-08-21T16:50:43.770 回答
1

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

$('element').identify();

在你正在做的事情的上下文中，我个人会使用 Prototype 的模板功能，它将代码转换成这样的东西：

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

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

于 2009-09-05T19:15:13.947 回答