我正在编写一个应用程序,它是各种各样的“功率计”,我在导航中显示了与其相关的额定功率的“位置”列表,以及聚合此信息的指标.位置可以嵌套.单击某个位置会更改我的应用的“状态”并将其子位置加载到导航中.单击后退将用户带到以前的位置列表.

目前我对新的额定功率进行了调查(稍后会考虑更好的解决方案,但这仅仅是一个概念证明)然后我使用模板重新生成导航视图,类似于$(nav).html(someHtml)

我正在使用事件委托,因此我不需要在状态更改时重新绑定我的位置上的事件.

所以,目前我每次获得一组新数据时都会覆盖视图.我不确定是否会对此产生性能影响,但肯定存在功能性影响.例如,有时我的位置列表超出了我的导航空间,所以我滚动(溢出：自动).然而,当我更新视图时,它会重置该div的scrollTop,这使得滚动浏览很长位置列表的人无法使用它. (例如,轮询是以2秒为间隔)

所以,我正在寻找一种解决方案,允许我将我的JSON数据实际绑定到每个位置的dom元素.然后当我进行轮询时,我可以$.扩展我现有的数据并让它自动刷新我视图中的值.这可能吗？我刚刚找到了jquery-datalink插件,但它似乎只为表单实现,我在这个应用程序上没有表单.

我从来没有真正使用过jQuery的数据方法,我甚至不知道这是否是我需要的,但基本上我想要这样的东西：

>单击某个位置时,触发加载新数据的状态更改并设置我的轮询网址.
>首次数据加载将生成视图(新位置)
>后续数据加载(通过轮询)将只使用适当的数据更新dom元素,而不是重新生成html

我听到了一些可能的解决方案.我很高兴地欢迎伪代码和概念证明,因为我完全有能力实施理论解决方案.

编辑
将此与您选择的模板解决方案(jQuery.tmpl或胡子等…)集成的奖励积分

最佳答案 现在有
official jquery plugins提供数据链接和模板.看看有关这一切的
John Resig has to say.此外,还有一些您可能感兴趣的其他资源：

> http://github.com/nje/jquery-datalink
> http://github.com/nje/jquery-datalink/wiki/jquery-data-linking-proposal
> https://github.com/raid-ox/chain.js/wiki/(这个很旧,但可能值得查看代码)

我的应用程序与您的应用程序具有相同类型的要求,因此我非常渴望找到一个好的解决方案.我还没有尝试jquery数据链接,但计划一旦时间允许.但我不确定它是否足够强大以满足我非常复杂的需求.

我真正感兴趣的是以事件驱动的方式进行数据绑定.基本上,视图将监听“模型更改”和“集合 – 更改”事件,并相应地更新自身.更改模型时,会抛出一个事件.视图组件会看到该事件并自行更新.

不久前,我花了很多时间研究这样的事件驱动的数据绑定系统.我完成了75％,但后来又回到了实际工作中.事实证明它非常复杂,因为它必须处理许多场景.我本质上是在创建一个数据管理系统,它使用模型和集合包装JSON对象.这是必要的,以便能够检测值何时更改并抛出事件.例如：

>更新单个现有数据元素,因此在呈现该数据模型的视图中的任何位置都进行更新.例如,当前登录的用户可以在页面顶部的“欢迎汤姆史密斯”组件,“当前登录的用户”列表(集合中的项目)以及“我的个人资料“面板.如果汤姆改变了他的名字,那么改变应该随处可见.
>已修改元素集合,因此需要显示当前的集合状态.最容易在视图中重新渲染整个集合,但随后丢失任何现有状态(例如滚动位置,隐藏/显示的div等).更好的解决方案是添加新元素,删除旧元素,并更新视图中已更改的现有元素,而无需刷新整个视图.这成为数据管理的噩梦,跟踪脏模型,脏集合等.
>需要确保在模型更改时仅更新每个视图组件一次.如果集合是脏的并且集合中的项目是脏的,请不要刷新整个集合,然后刷新其中的项目.
>需要通用并适用于任何视图.
>数据分页怎么样？如果视图显示第1页上的项目1-50,并且从数据收集模型中删除了5个项目,是否应向服务器发出AJAX请求以获取5个附加项目以使视图显示50个项目？

总有一天我会回到那个项目,因为我花了很多时间.但首先我要尝试jquery datalinking项目.也许他们已经解决了这一切.如果您使用它,我很乐意听到您的任何反馈.

那么你提到的奖励积分怎么样？ 🙂