jQuery - 保持 js 数组和 DOM 对象列表同步？

Question

假设我有一个对象数组

[{href: 'some_uri', 'class': 'this-css-class'}, {href: 'another_uri', 'class': 'that-css-class'}]

我现在想将其映射到 html 列表:

<ul>
  <li class="this-css-class"><a href="some_uri">some_uri</a></li>
  <li class="that-css-class"><a href="another_uri">another_uri</a></li>
</ul>

假设我向数组添加另一个对象，我想要一个新的 <li>也添加到列表中。相反，当我 $('.that-css-class').remove()列表项之一，我希望它也消失在数组中。

我想将其保留在 jQuery 中，因为我不想向项目引入另一个框架。

非常感谢帮助，这一直在困扰我。谢谢。

Answer 1

我不知道你的确切用例是什么，但保持数据和 View (即 DOM)同步可以很好地由 backbone.js 处理。

您可以查看以下示例应用程序，了解如何使用模型、集合和 View 来使存储在 localStorage 中的 JSON 数据与通过 DOM 显示给用户的数据保持同步

Demo和 annotated source

但这只是backbone.js提供的功能的一部分，可以按照您的建议嵌入到单个库中。但我不知道有这样的库。