每个 input 往后端传值，大概十个 input 一组，不确定多少组，组的数量可以动态改变，我用 js 加了一大段 html 然后还往里面拼接 id，这个 js 好长，你们平时做也是这样吗？我还有类似需求，感觉页面好丑，以前没见过我这样写的，主要是间的少，这样写好吗，网上也找不到例子，只知道这样做能行，但是感觉不好，有啥我不知道的方法吗
This topic created in 2446 days ago, the information mentioned may be changed or developed.
 |
1
yokyj Oct 15, 2019  1
用 react 或者 vue..数据驱动
|
 |
2
imdong Oct 15, 2019 1
```
<script type="text/html" id="tpl-demo1"> <div>Test<span class="red">Success</span></div> </script> <script> var html_str = document.getElementById('tpl-demo1').innerHTML; </script> ``` |
 |
3
jeodeng Oct 15, 2019 1
唤起了我以前写原生的时候记忆，封装一个插入 input 的函数，需要 n 组就循环 n 次调用函数就直接操作 dom 了。
|
 |
4
hewelzei Oct 15, 2019 1
试试 lodash.template 或者 art-template 之类可以在前端直接引入的模版库，这样可能写的时候舒服一些
|
 |
5
fancy111 Oct 15, 2019 1
很明显你没搞清楚业务的最佳处理方式。
十个 input 一组？不确定有多少组？这么多数据干嘛不动态添加转 json 传，搞那么多 input 有必要吗？ |
 |
6
Augi Oct 15, 2019 via iPhone 1
不用 react 啥的，就用个 template 吧，js 循环添加
|
 |
8
xiaobo944 Oct 15, 2019 1
不光是这些麻烦问题，以后还会遇到绑定事件的问题，
重复绑定，触发了两次之类的。 还有元素是否创建出来，能不能绑定事件。 或者元素未生成之前你的值是获取不到的。 我早先也经常创建删除 HTML 遇到了不少问题，还尝试自定义模板字符，将字符串替换，执行函数什么的用 eval 去跑，太麻烦了，到了后边改动很麻烦。 直接输出 HTML 的做法 demo 项目还可以，如果正常开发，请移步现代前端开发技术选型 react Vue 之类的。 |
 |
9
unsized Oct 15, 2019 1
可以看看 Mustache
|
 |
10
ironMan1995 Oct 15, 2019
比如要给后端传递 const data = {inputValOne: '',inputValTwo: ''} ，先写个 input 的组件，给它定义一个自定义属性 data-*(名字就是要传给后端的数据属性名)，const keys = Object.keys(data)，直接循环 keys 遍历 input 组件，所有组件监听一个 onChange 事件,通过 const name = event.currentTarget.getAttribute(‘data-*’) 获取自定义名称，data[name] = ev.target.value，最后 JSON.stringify(data),传给后端就行，这是我的思路
|
|
11
ironMan1995 Oct 15, 2019
循环一个组件或者模板动态渲染出来，最后直接插入到页面，操作 dom 次数也少
|
 |
12
12tall Oct 15, 2019
vue?
时间紧 能跑起来就是好代码~ |
 |
13
LyleRockkk Oct 15, 2019
找个前端朋友帮你解决这个问题吧，如果非要自己来，可以了解一下 template 模板语法，vue ,react 上手可能会慢一些
|
Select Language