我具有<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-NET MVC。我使用引導程序使它看起來不錯。而且我有一些JS邏輯可用于按用戶創建此代碼。此HTML代碼只是我創建的示例。我需要存儲此結構，并能夠從存儲的數據中構建HTML（以便用戶可以恢復并查看其結構）。因此，我了解到我需要使用JSON進行存儲。這是我的問題：實現目標的更好方法是什么？我需要使用一些JS庫，對嗎？您能否提出我明確的實用建議，在這種情況下使用什么以及為什么使用。
1 回答
開滿天機
TA貢獻1786條經驗 獲得超13個贊
你不具備使用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對象的相同索引）和字段（只需獲取類名），然后更新即可適當的值。
這種基于渲染的數據也是React，Angular和Vue之類的庫所做的。根據您的項目，您可能會考慮利用其中之一來幫助解決問題（盡管如果項目很小，那么如果沒有，它是完全可行的）。
- 1 回答
- 0 關注
- 195 瀏覽
添加回答
舉報
0/150
提交
取消