描述你的问题
靠ajax实现页面不刷新添加数据时?如果添加记录成功,经常用js实现插入html元素的操作。比如,在table中插入一个tr之类的。这类的代码改如何写才既优雅又便于维护呢?
贴上相关代码
我之前刚写js代码时这类的处理都是直接jquery写,类似: $(xxx).html("xxxxx")这种代码。这样写虽然页面上的效果看起来还不错,但是代码上真心难以维护, 业务稍微复杂一些就经常会写出js中以字符串的形式编写html,而这些html中又包含有js的代码,这样写的时候还可以接受,但是如果要修改的话就太恐怖了……
这里随便贴一段代码, 大家一起体会一下:
$.post("${ctx}/sys/goods/goodsFullInfo", {goodsId:this,cardId:$("#CustomerCard").val()}, function (data){
if (data.goodsId != null) {
var trObjects = $("#goodsAdd").find('tr');
var html = "
"+"
"+(trObjects.length-1)+" "+"
"+data.name+""+"
"+data.brandName+""+"
"+"
"+"
";$("#goodsAdd").append(html);
}
});
这种代码不算复杂,还有比这个复杂的多的, 这些代码写在html中也就算了,更让人揪心的是,这种代码整个项目中导出都是,如果要修改个功能,得研究半天这些字符串,还经常标签对不起。鸭梨真心很大……
已经尝试过哪些方法仍然没解决(附上相关链接)
尝试过直接用js创建dom对象,然后设置属性添加数据,但是那样感觉好啰嗦,不知道有没更好的方法?
听说过双向数据绑定,感觉这个是建立在组件化开发的基础上的. 不知道还有其它方法没,最好给个示例代码让俺学习下。