在HTML基础上创建JSON，反之亦然

Question

我有基于<select>/<input>的元素的层次结构，这些元素可以形成(逻辑)组。换句话说，我有逻辑树，其中由(3) <select>/<input>表示的每个节点。

以下是HTML的外观(所有额外的元素，如已删除的按钮)：

<div class="conditions-group logical-or">

<div class="conditions">

    <div class="conditions-group logical-and">

        <div class="conditions">

            <div class="condition row">
                <div class="metric">
                    <select class="form-control"></select>
                </div>
                <div class="operator">
                    <select class="form-control "></select>
                </div>
                <div class="value">
                    <input value="" class="form-control">
                </div>
            </div>

            <div class="condition row">
                <div class="metric">
                    <select class="form-control"></select>
                </div>
                <div class="operator">
                    <select class="form-control "></select>
                </div>
                <div class="value">
                    <input value="" class="form-control">
                </div>
            </div>

        </div>

        <div class="condition row">
            <div class="metric">
                <select class="form-control"></select>
            </div>
            <div class="operator">
                <select class="form-control "></select>
            </div>
            <div class="value">
                <input value="" class="form-control">
            </div>
        </div>

    </div>
</div>

​

我的应用是C# ASP.NETMVC.我用引导使这个看起来很好。我有一些JS逻辑来创建这个用户。这个HTML代码只是我创建的一个例子。

我需要存储这个结构，并能够从存储的数据构建HTML (这样用户就可以返回并查看他的结构)。因此，我理解我需要使用JSON来存储。

以下是我的问题:实现我的目标的更好方法是什么？我需要用JS图书馆，对吧？请您给我明确的实用建议，在这种情况下使用什么和为什么。

Answer 1

您没有可以使用JSON的，但是您确实需要以某种方式序列化它。JSON可以是一种相当干净的方法。

有一些库可以做到这一点，但粗略地看一下，它们似乎都没有得到很好的支持，所以您可能会想要避免。

在这种情况下，它似乎相当直截了当，我可能会采取一种更直接的方法，你或多或少是用手做的。

首先，因为看起来每个对象中都有metric、operator和value，所以我将从对象中的内容开始：

{
  rows: [
    { metric: 'someValue', operator: 'someValue', value: 'someValue' },
    // .. more as necessary
  ]
}

我将将该对象构建为POJO (普通旧JavaScript对象)，然后使用JSON.stringify()将其转换为JSON。

使用您的数据，您基本上可以遍历并输出HTML：

function render(rows) {
  rows.forEach(({ metric, operator, value }) => {
     // create elements based on these value
  });
}

为了保存数据，有两种方法：

• 解析HTML并将其转换为JSON对象
• 将数据保持为一个对象，更新它，然后根据它重新呈现页面。

我更喜欢第二种方法。而不是直接生成HTML，而是有一个数据对象，当您进行更改时，更新该对象，只需调用您的render()方法重新呈现。这意味着您不必在保存时解析HTML。

它还将简化您所提到的工具，以允许使用它来添加这一点，因为它所要做的只是rows.push({ metric: 'defaultValue', operator: 'defaultValue', value: 'defaultValue' })。

唯一的另一件事是向每个输入添加一个onChange()。当它们发生变化时，找出它是哪一行(获取.row父节点并确定它相对于其兄弟节点的索引，这将是rows对象的相同索引)和字段(只需获取类名)，然后只更新适当的值。

这种基于渲染的关闭数据也是库的反应，角度和Vue所做的.根据您的项目，您可以考虑利用其中的一个来帮助其他事情(尽管如果项目很小，它完全可以完成)。