使用 mustache.js 将数组数据渲染成 table 行；坚持执行行编辑

Question

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

Here is a codepen with all of the source code.

---

我有一个名为 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);

当用户在 Add Item div（屏幕截图右侧）中输入详细信息时，[=16= 中的 info 数组] 被填满（目前有 3 个条目）。

---

我卡住的部分是当用户单击 "MODIFY" table 列中的 "Edit" 或 "Delete" 按钮时编辑一行。我将以下点击侦听器绑定到 table:

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

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

非常感谢任何帮助。

Answer 1

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

1. 将索引添加到 Mustache 渲染函数的数组元素
2. 在 HTML
中将索引呈现为 data- 属性
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 的 属性。

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

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

console.log("--- The object AFTER addIndexes() ---");
console.log(addIndexes(object));

console.log("--- The object BEFORE addIndexes() ---");
console.log(object);

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

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

第 2 步：在 HTML

中将索引呈现为 data- 属性

现在我们需要在 HTML 模板中附加这些索引。在您的主 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;
    }
});

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

这些处理函数（editInfo() 和 deleteInfo()）目前都没有声明，所以到最后一步！

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

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

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

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

---

我们现在完成了！抱歉，这是一个冗长的答案，我想在我们进行的过程中分解每一步。让我知道这一切是否有意义，如果您有任何问题！