Question

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

列出一个

苹果
- 电话
  - iPhone
- 计算机
  - Macbook Air
  - 三星
- 电话
  - Galaxy S

列出两个

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

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

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

我看了一下KnockoutJS，但是为了给每个列表创建一个viewModel并通过KnockoutJS映射库更新它，事情似乎变得一团糟。

我正在考虑简单地使用jQuery，但我不是用它来构建DOM的大部分（它似乎很快变得难看）的巨大粉丝。

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

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

由于

Answer 1

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

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

[1] http://backbonejs.org/

Answer 2

这更像是一个部分答案，试图解决“在'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转换应用程序。这将让您更好地了解您会更喜欢哪些内容，并向您介绍不同的框架。

Answer 3

不是问题的直接答案 - 仍然值得一看Kendo UI MVVM

用于构建动态但服务器端驱动前端的JavaScript框架

3 个答案: