1

我正在考虑构建一个或多或少包含几个嵌套列表的小型应用程序，并且在每个列表中选择各种项目将过滤其他嵌套列表的内容。

清单一

  • 苹果
    • 电话
      • 苹果手机
    • 电脑
      • MacBook Air
      • 三星
    • 电话
      • 银河小号

清单二

  • 百思买
    • 密歇根州安娜堡
    • 伊利诺伊州芝加哥
  • 沃尔玛
    • 密歇根州兰辛

如果用户点击“Apple > Phone”，服务器将在列表 2 中找到相关条目，并更新列表 2 以仅显示“Best Buy”（假设 Best Buy 是唯一一家销售 Apple 制造的手机的商店）

我的问题是，有没有人推荐我应该使用什么前端 JS 库来构建它？这将基于来自服务器的 AJAX JSON 响应来更新 DOM（列表）。

我查看了 KnockoutJS，但尝试为每个列表创建 viewModel 并通过 KnockoutJS 映射库更新它似乎变得一团糟。

我正在考虑简单地使用 jQuery，但我不喜欢用它构建大部分 DOM（它似乎很快变得丑陋）。

我想避免的一件事（以及为什么我在看 KnockoutJS）是我不喜欢在代码中编写标记。我喜欢在“HTML”中维护我的标记，并通过框架将 JS 数据“绑定”到这些元素的想法。

此外，我希望将 jQuery 用于所有视觉“绒毛”、事件绑定等。

谢谢

4

3 回答 3

1

我最终选择了 Backbone.js [1]

就绑定而言，它似乎比 Knockout.js 更灵活一些。我正在使用 Backbone 支持的 JS 模板来构建每个列表级别。这需要一些代码，但 Backbone 非常灵活（因此需要一些代码）。我确信这在许多其他 JS 框架中是可能的，但我认为我已经能够取得更大的进步更冗长，但正因为如此，它更容易拼凑出一切是如何运作的。

[1] http://backbonejs.org/

于 2012-07-08T05:02:23.887 回答
0

这更像是一个部分答案，试图解决“在'HTML'中维护......标记”的概念。我会在 HTML 中创建一个通用菜单项，它可以作为每个菜单项的模板，如下所示：

<li id="menuItemTemplate" class="menuItem">
  <span class="menuItemText"></span>
  <ul class="submenu"></ul>
</li>

这不会出现在您页面上的可见位置；它只是为每个菜单项插入的 HTML。然后，当您添加菜单项时，您的 JavaScript 将负责menuItem在列表中添加所需数量的元素。就 HTML 操作而言，JavaScript 只需要执行诸如添加id或class属性之类的操作来组织或设置数据样式，以及添加每个项目的文本内容。示例实现可能如下所示（我喜欢 jQuery）：

function loadMenuItem(text, parentId) {
  // Grab the template
  var newItemHtml = $("#menuItemTemplate")[0];
  // Set its id to something unique
  $(newItemHtml).attr("id", getNextId());
  // Set the text
  $(newItemHtml).find("span.menuItemText").html(text);
  // Put it in the clicked menu
  $(parentId + "ul.submenu").append( newItemHtml );
}

不过，最后，我不会为您的项目编程。我只能给你我的偏好。如果这需要很长时间，我想说对你来说最好的办法是尝试所有听起来有趣的框架（显然是小规模的），以大致了解如何你喜欢在每一个中开发 DOM 转换应用程序。这将使您更好地了解您更喜欢哪个，并向您介绍不同的框架。

于 2012-06-01T22:48:57.010 回答