Question

I am looking at building a small app that is more or less several nested lists, and selecting various items in each list will filter the contents of the other nested lists.

List One

• Apple
  • Phone
    • iPhone
  • Computer
    • Macbook Air
    • Samsung
  • Phone
    • Galaxy S

List Two

• Best Buy
  • Ann Arbor, MI
  • Chicago, IL
• Walmart
  • Lansing, MI

If a user Clicks on “Apple > Phone”, the server will find the associated entiries in list Two for, and update List Two to show only “Best Buy” (assuming Best Buy is the only store selling Phones made by Apple)

My question, is does anyone have a recommendation for what Front end JS library I should use to build this out? This is going to be alot of updating the DOM (the lists) based on AJAX JSON responses from the server.

I took a look at KnockoutJS but things seemed to get messy trying to create a viewModel for each list, and updating it via the KnockoutJS mappings library.

I was thinking about simply using jQuery but Im not a huge fan of building out large sections of the DOM with it (it seems to get ugly quickly).

One thing I would like to avoid (and why I was looking at KnockoutJS) is I dont like writing markup in code. I like the idea of maintaining my Markup in the “HTML”, and “binding” the JS data to these elements through a framework.

Also, I hope to use jQuery for all the visual “fluff”, event binding, etc.

Thanks

Answer 1

I ended up settling on Backbone.js [1]

It seems a bit more flexible than Knockout.js in terms of the bindings. I am using Backbone supported JS Templates for building out each list level. This has required a bit of code, but Backbone is very flexible (thus the bit of code). Im sure this is possible in many other JS frameworks, but I think i’ve been able to make more progress w Backbone is I dont need a deep understanding of the framework/API/intricacies to make it work – the(my) code may be more verbose, but because of this its easier to piece together how everything works.

[1] http://backbonejs.org/