Handlebars & Jquery：动态生成的 ID

Question

我正在 handlebars 页面上生成动态 form 和 button。

原来的handlebars代码是这样的：

{{#each record}}
    <input class="form-control" type="text" id="comment" value={{comment}}> 
    <button class="btn small btn-success" id="btn-savecomment">SAVE COMMENT</button>
{{/each}}

我有一个 jquery 脚本来在按下每个按钮时保存表单的内容：

$(document).ready (
    function() {
        $(document).on('click','#savecomment',function(event){
            // save id: comment to record
    );

目的是让用户输入评论，然后保存到每条记录。

但是如何确保按钮在查看评论时识别正确的输入表单？当我点击一个特定的按钮时，它只会从第一条记录中检索评论，因为它们都有相同的 ID。

感谢帮助！

Answer 1

你这样做其实是错误的。如您所知，IDs 不应重复。你应该使用这样的东西：

{{#each record}}
    <input class="form-control" type="text" id="comment" value={{comment}}> 
    <button class="btn small btn-success btn-savecomment" id="btn-savecomment-{{@index}}">SAVE COMMENT</button>
{{/each}}

下一个在 jQuery:

$(document).ready (function() {
    $(document).on('click', '.btn-savecomment', function (event) {
        // save id: comment to record
    });
});

Answer 2

您不能在不同的元素上使用相同的 ID。这就是您的代码无法正常工作的原因。给每个元素一个不同的 id。您可以使用 {{@index}} 获取当前迭代计数，然后在 id 中使用它来生成动态 id 即：

<input class="form-control" type="text" id="comment_{{@index}}" value={{comment}}>

您也应该对按钮执行相同的操作。在您的 jQuery 代码中，您可以使用 prev() 方法

访问输入

然后您可以使用 jquery 访问它。或者您也可以使用 class 而不是 id。这样就更好了

Answer 3

好吧，您可以动态生成 ID，但很可能您应该只使用更合适的类或数据值（或类似的）：

{{#each record}}
    <input class="form-control" type="text" data-comment={{@index}} value={{comment}}> 
    <button class="btn small btn-success" data-trigger="save">SAVE COMMENT</button>
{{/each}} 

$(document).on("click", "[data-trigger='save']", function (evt) {
  var commentID = $(this).prev().data("comment"); //index number, can be pretty much anything
});

Handlebars & Jquery：动态生成的 ID

Handlebars & Jquery: Dynamically generated ids

jquery

handlebars.js