使用mustache.js将数组数据渲染成表格行；停留在实现行编辑上

Question

我正在创建一个用于跟踪费用的应用程序。

这是一个包含所有源代码的代码笔。

---

我有一个名为的全局对象object，我将其渲染到 Mustache 模板：

var object = {
    info : [
        {date: "14, July", day: "Saturday", item: "Lunch", price: 40}
        {date: "15, July", day: "Sunday", item: "Airport", price: 80}
        {date: "14, July", day: "Saturday", item: "Snacks", price: 25}
    ],
    withdrew: 0
};

{{#info}}
<tr>
    <td>{{date}}</td>
    <td>{{day}}</td>
    <td>{{item}}</td>
    <td>{{price}} /-</td>
    <td><a href="#" id="editInfo">Edit</a> | <a href="#" id="deleteInfo">Delete</a></td>
</tr>
{{/info}}

Mustache.render(template, object);

当用户在“添加项目” div（屏幕截图右侧）中输入详细信息时，info数组object将被填充（当前有 3 个条目）。

---

我陷入困境的部分是当用户单击“修改”表列中的“编辑”或“删除”按钮时编辑一行。我将以下点击侦听器绑定到表：

var modifyBtn = document.querySelector('table');
modifyBtn.addEventListener('click', function(e){
    console.log(e.target);
});

这样，我就可以使用 正确获取两个按钮节点console.log()，但是如何使它们唯一地指向每行生成的原始数组元素？

非常感谢任何帮助。

Answer 1

有几种方法可以做到这一点，但对我来说立即脱颖而出的方法如下：

1. 将索引添加到 Mustache 渲染函数的数组元素中
2. 将索引呈现为data-HTML 中的属性
3. 在点击侦听器中检索此数据
4. info使用此数据修改原始数组

让我们来看看这个。

第 1 步：将索引添加到 Mustache 渲染函数的数组元素中

首先，我们要检索 HTML 中的数组索引。使用 Mustache 渲染时，默认情况下此数据不可用，因此我们需要自己添加它。这不能永久添加到数组对象中。实际索引可以随时更改（例如，如果删除元素）。相反，我们只想渲染 HTML 的索引，而不是其他地方。

创建以下addIndexes()函数：

function addIndexes(object) {
    object = JSON.parse(JSON.stringify(object));
    var info = object.info;

    for (var i = 0; i < info.length; i++) {
        info[i].index = i;
    }

    return object;
}

• 第一行克隆对象。请记住，我们不想修改原始对象或数组。这使我们能够处理不影响原件的副本。
• 我们遍历该数组并将该数组的索引添加到名为 的属性中index。

function addIndexes(object) {
    object = JSON.parse(JSON.stringify(object));
    var info = object.info;

    for (var i = 0; i < info.length; i++) {
        info[i].index = i;
    }

    return object;
}

现在，只需修改Mustache.render()方法即可使用我们的新addIndexes()函数：

function refreshDOM() {
    var outputBody = Mustache.render(template, addIndexes(object));
    ...
}

第 2 步：将索引呈现为data-HTML 中的属性

现在我们需要将这些索引附加到 HTML 模板中。在 main 中index.html，转到渲染函数并更改按钮代码以读取以下内容：

<td><a href="#" id="editInfo" data-index="{{index}}">Edit</a> | <a href="#" id="deleteInfo" data-index="{{index}}">Delete</a></td>

现在我们将索引输出到data-index属性，以便稍后检索。这会将每个按钮元素呈现为如下所示：

<td><a href="#" id="editInfo" data-index="0">Edit</a> | <a href="#" id="deleteInfo" data-index="0">Delete</a></td>
<td><a href="#" id="editInfo" data-index="1">Edit</a> | <a href="#" id="deleteInfo" data-index="1">Delete</a></td>

依此类推，对于每一行。

步骤 3：在点击侦听器中检索此数据

我们现在可以实际处理这些数据。将您的modifyBtn点击事件侦听器更改为以下内容：

var modifyBtn = document.querySelector('table');
modifyBtn.addEventListener('click', function(e){
    var el = e.target;
    var action = el.id;
    var index = parseInt(el.dataset.index);

    switch (action) {
        case "editInfo": editInfo(index); break;
        case "deleteInfo": deleteInfo(index); break;
    }
});

• 我们现在el从 获取（这只是元素）event.target。
• 我们可以从您的el.id.
• 索引值data-index可以通过 检索el.dataset.index。请注意，它作为字符串放置在 HTML 中（我们无法使用），因此我们必须parseInt()对其运行以从字符串中获取整数。
• 通过 switch 语句，我们现在可以根据 ID 执行操作。

这些处理函数（editInfo()或deleteInfo()）当前都没有声明，所以进入最后一步！

info步骤 4：使用此数据修改原始数组

我不知道你想用这个editInfoID 做什么，所以我把这个问题留给你吧。我在deleteInfo点击侦听器正上方创建了一个简单的函数：

function deleteInfo(index) {
    object.info.splice(index, 1);
    refreshDOM();
}

这将从全局数组中删除指定的索引object.info，然后调用refreshDOM()更新。

我们现在完成了！抱歉，这是一个冗长的答案，我想在我们进行过程中分解每一步。如果您有任何疑问，请告诉我这一切是否合理！