Question

我有基于<select>/<input>的元素的层次结构，可以组成（逻辑）组。换句话说，我有逻辑树，其中每个节点由（三）<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-NET MVC。我使用bootstrap使这看起来很好。我有一些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并在事后
将数据保存为对象，更新它，然后根据它重新呈现页面

我更喜欢第二种方法。不要直接制作HTML，而是拥有一个数据对象，当您进行更改时，请更新该对象，然后调用render()方法重新渲染。这意味着您在去保存时不必解析HTML。

它还会简化您提到的允许用户添加此工具的工具，因为它必须做的只是rows.push({ metric: 'defaultValue', operator: 'defaultValue', value: 'defaultValue' })。

唯一的另一件事是为每个输入添加onChange()。当它们发生变化时，找出它是哪一行（获取.row父项并找出它与其兄弟姐妹相关的索引，这将是rows对象的相同索引）和字段（只需获取类名称，然后只需更新相应的值。

这种基于渲染的数据也是像React，Angular和Vue这样的库。根据您的项目，您可以考虑利用其中一个来帮助解决问题（尽管如果项目规模较小，则完全可行）。

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

1 个答案: