jQuery绑定数据与视图

Question

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

目前我正在调查新的额定功率（稍后会考虑更好的解决方案，但这只是一个概念验证）然后我使用模板重新生成导航视图，类似于$(nav).html(someHtml)

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

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

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

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

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

我很想知道一些可能的解决方案。我很高兴地欢迎伪代码和概念证明，因为我完全有能力实施理论解决方案。

修改 将此与您选择的模板解决方案（jQuery.tmpl或胡子等等）集成的加分点

Answer 1

现在有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项目。也许他们已经解决了这一切。如果您使用它，我很乐意听到您的任何反馈。

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

Answer 2

http://documentcloud.github.com/backbone/

Answer 3

您可以使用jQuery pure html templates。