0

For the past few days I'm getting more interested in Knockoutjs. It looks very promising because it models the MVVM pattern and WPF like bindings, but I do have some doubts whenever it bring something useful to non RIA web apps (and when I say RIA I mean complex in browser applications, let's say an ERP, anyway something a bit more complex than adding a few rows to a table and hiding one)

Let's say you have a combobox with 10 items, and you need to be able to create on client side another 2 items and save them on the server.

The way I see it you would have to create a viewmodel with a Obs. array prefilled with the 10 items, and also render the 10 items inside the combobox (as 10 option elements).

Basically you would have 2 loop twice the item collection and render the items in js viewmodel and the combobox (options).

Now imagine you would have 30 controls wouldn't having information on both knockout view model and html controls with pre-filled data be an overhead?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Narcis
  • 5,862
  • 3
  • 23
  • 30

1 Answers1

2

Every situation is different but I don't think you would normally need to render those combobox options as well as defining them in a Knockout view model - Knockout will build the options HTML for you. I have numerous comboboxes populated in this way in a complex object graph. When the page first loads the initial state of the object graph is rendered in the page as an object literal which I then pass into my top-level Knockout view model constructor, which creates the entire structure via the mapping plugin (creating child view models etc). Then all saving and updating is done via small discrete Ajax operations and remapping with the mapping plugin.

Tom W Hall
  • 5,273
  • 4
  • 29
  • 35
  • The Knockout site (which is one of the nicest, best documented and presented library sites I've come across - why can't they all be like this?) has a nice demo of various HTML control bindings: http://knockoutjs.com/examples/controlTypes.html – Tom W Hall Jul 04 '12 at 10:45
  • In my context, Knockout's client side HTML generation has drastically reduced my overhead by allowing me to reuse the same metadata across multiple view models - for example I pull down my reference lookup data as JSON once in a separate file, which gets cached, and it is used by Knockout as select options across maybe 10 selects. Then each view model just stores its selected item ID. If the page rendered with each select prepopulated with the same items it'd get heavy fast. – Tom W Hall Jul 04 '12 at 11:36
  • One problem i see with populating just the view model is that the combobox will get it's options only after page is fully loaded, i may want to select something as soon as the browser renders the select control.. – Narcis Jul 04 '12 at 13:03
  • That's possible too: let's say you have a list of occupations as an array of objects each with an ID and a display name. Then your binding would look something like: where OccupationID is the currently selected value on the view model (e.g. customer) who has an occupation. You can also define an empty option, etc. – Tom W Hall Jul 04 '12 at 20:47