这是一个创建于 1901 天前的主题，其中的信息可能已经有所发展或是发生改变。
每个 input 往后端传值，大概十个 input 一组，不确定多少组，组的数量可以动态改变，我用 js 加了一大段 html 然后还往里面拼接 id，这个 js 好长，你们平时做也是这样吗？我还有类似需求，感觉页面好丑，以前没见过我这样写的，主要是间的少，这样写好吗，网上也找不到例子，只知道这样做能行，但是感觉不好，有啥我不知道的方法吗
 |
1
yokyj 2019-10-15 09:50:16 +08:00  1
用 react 或者 vue..数据驱动
|
 |
2
imdong 2019-10-15 09:50:46 +08:00 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 2019-10-15 09:50:55 +08:00 1
唤起了我以前写原生的时候记忆，封装一个插入 input 的函数，需要 n 组就循环 n 次调用函数就直接操作 dom 了。
|
 |
4
hewelzei 2019-10-15 09:55:07 +08:00 1
试试 lodash.template 或者 art-template 之类可以在前端直接引入的模版库，这样可能写的时候舒服一些
|
 |
5
fancy111 2019-10-15 09:58:53 +08:00 1
很明显你没搞清楚业务的最佳处理方式。
十个 input 一组？不确定有多少组？这么多数据干嘛不动态添加转 json 传，搞那么多 input 有必要吗？ |
 |
6
Augi 2019-10-15 10:02:10 +08:00 via iPhone 1
不用 react 啥的，就用个 template 吧，js 循环添加
|
 |
7
ChefIsAwesome 2019-10-15 10:04:00 +08:00 2
|
 |
8
xiaobo944 2019-10-15 10:42:10 +08:00 1
不光是这些麻烦问题，以后还会遇到绑定事件的问题，
重复绑定，触发了两次之类的。 还有元素是否创建出来，能不能绑定事件。 或者元素未生成之前你的值是获取不到的。 我早先也经常创建删除 HTML 遇到了不少问题，还尝试自定义模板字符，将字符串替换，执行函数什么的用 eval 去跑，太麻烦了，到了后边改动很麻烦。 直接输出 HTML 的做法 demo 项目还可以，如果正常开发，请移步现代前端开发技术选型 react Vue 之类的。 |
 |
9
tyx1703 2019-10-15 11:00:39 +08:00 1
可以看看 Mustache
|
 |
10
ironMan1995 2019-10-15 11:22:07 +08:00
比如要给后端传递 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 2019-10-15 11:25:52 +08:00
循环一个组件或者模板动态渲染出来，最后直接插入到页面，操作 dom 次数也少
|
 |
12
12tall 2019-10-15 11:28:47 +08:00
vue?
时间紧 能跑起来就是好代码~ |
 |
13
LyleRockkk 2019-10-15 11:32:53 +08:00
找个前端朋友帮你解决这个问题吧，如果非要自己来，可以了解一下 template 模板语法，vue ,react 上手可能会慢一些
|
Select Language