jQuery 将数据与 View 绑定(bind)

Question

我正在编写一个类似“功率计”的应用程序，在导航中显示具有与其关联的额定功率的“位置”列表，以及聚合此信息的仪表。位置可以嵌套。单击某个位置会更改我的应用程序的“状态”并将其子位置加载到导航中。单击“返回”会将用户带到之前的位置列表。

目前，我正在轮询新的额定功率(稍后将研究更好的解决方案，但这只是概念证明)，然后我使用模板和类似于 $(nav).html(一些Html)

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

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

因此，我正在寻找一种解决方案，允许我将 JSON 数据实际绑定(bind)到每个位置的 dom 元素。然后，当我轮询时，我可以 $.extend 我的现有数据并让它自动刷新我 View 中的值。这可能吗？我刚刚找到了 jquery-datalink 插件，但它似乎只针对表单实现了这一点，我在这个应用程序上没有表单。

我从来没有真正使用过 jQuery 的 data 方法，我什至不知道这是否是我需要的，但基本上我想要这样的东西:

• 点击某个位置后，会触发状态更改，加载新数据并设置我的轮询网址。
• 第一次数据加载将生成(新位置的) View
• 后续数据加载(通过轮询)将仅使用适当的数据更新 dom 元素，而不是重新生成 html

我洗耳恭听一些可能的解决方案。伪代码和概念证明很受欢迎，因为我完全有能力实现理论解决方案。

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

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 数据链接，但计划在时间允许的情况下尽快尝试。但我不确定它是否足够强大来满足我相当复杂的需求。

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

不久前，我花了很多时间研究这样的事件驱动数据绑定(bind)系统。我可能已经完成了 75%，但随后必须回到实际工作中。事实证明它非常复杂，因为它必须处理很多场景。我本质上是在创建一个数据管理系统，用模型和集合包装 JSON 对象。为了能够检测值何时更改并引发事件，这是必要的。例如:

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

总有一天我会回到那个项目，因为我投入了大量时间。但首先我将尝试 jquery 数据链接项目。也许他们已经解决了这一切。如果您使用它，我很乐意听到您的任何反馈。

那么你提到的那些奖励积分怎么样？ :)