如何实现dom结构与json数据结构同步更新？

[cherryYang88]

有如下json结构：
var menu = [
{"type_id":1,"name":"大菜","food":[
{"food_id":1,"name":"鱼香肉丝","price":"10"},
{"food_id":2,"name":"红烧肉","price":"11"},
{"food_id":3,"name":"香辣粉","price":"12"}
]},
{"type_id":2,"name":"中菜","food":[
{"food_id":4,"name":"小炒肉","price":"13"},
{"food_id":5,"name":"云吞","price":"14"}
]},
{"type_id":3,"name":"小菜","food":[
{"food_id":6,"name":"雪糕","price":"15"},
{"food_id":7,"name":"黄瓜","price":"16"}
]}
];
要求是这样的：
step 1: 根据menu的数据，动态生成一个二级联运菜单
step 2: 实现动态增加、修改、删除菜单dom节点，同时保持dom结构与json保持同步
step 3: 实现通过拖拽修改菜单结构（可使用jQuery插件），同时保持dom结构与json保持同步[/size]


假如使用本地存储localStroage来做的话，那个数据结构要怎么存储呢？可不可以使用angular来实现呢？

[letMeAlone_]

我估计别人一看你结贴率0就不想回答了，本来也就是因为很多这种人，论坛才变得死气沉沉的。 只要你在操作DOM的时候把数据添加到menu就行了，不一定要用本地存储。当然如果你的个人场景需要保持用户的这种菜单状态的话就另说了。 比如在DOM上面绑定一个add方法，然后menu.push({ {"type_id":4,"name":"凉菜菜","food":[ {"food_id":1,"name":"xx","price":"10"}, {"food_id":2,"name":"xx","price":"11"}, {"food_id":3,"name":"xx","price":"12"} ]}}); 然后删除该元素。 这就保证了视图和JSON数据时一致的。 当然用NG或者VUE来做数据绑定更好，框架已经帮你完成了对DOM的操作，我们只需要重点关注数据就可以了。这样你只要改变了数据，视图就会相应改变，不需要自己再写代码区操作DOM

[似梦飞花]

数据 setter 根据setter修改dom