Databases
StackOverflow2013
Postsdbo
POWhat is the design pattern for multi-layer cascading drop downs using knockout and knockout.mapping?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat is the design pattern for multi-layer cascading drop downs using knockout and knockout.mapping?
    primarykey
    data
    text
    <p>So I realize that this question can be seen as somewhat vague, but it's actually quite specific.</p> <p>I started to write this out, then realized that lack of specific verbiage makes it sound vague. So let me put it this way.</p> <p>I've got an Order object, that has customer data on it. It also has, for the sake of this example, a single order for a car.</p> <p>The Car has a Category, Product, Year, Color. For the sake of this example, my Order page has 4 drop downs, which cascade one to another. Category populates Product populates Year populates Color.</p> <p>(I was going to go with Make and Model, then realized using "Model" was getting confusing, haha.)</p> <p>I've got several problems:</p> <ol> <li>I've got multiple layers of dropdowns. Four, not just one.</li> <li>My drop down objects are not related to each other specifically - that is to say, I use an id from Cateogry to populate Products, but Category does not come with Products when it's retrieved. This is different than the Cart example that KO has on their website.</li> <li>I am stuck with the above architecture. I need to change a drop down, then send a service call to get the next drop down based on the selected drop downs id. I can't alter the service layer to nest the objects together.</li> <li>My Order comes with child objects to indicate Make, Model, Year, Color. However, since these are different, I've been using the knockout.mapping keyed array and a custom binding handler to look up data object. Thankfully I only have to do this once, as after the object in the top level is replaced, it's fine.</li> </ol> <p>I've been trying to use knockout.mapping to map the relevant objects, especially considering the key thing.</p> <p>However, I'm totally open to just making the objects in knockout.</p> <p>The problem I'm having, and this thing has really turned into a disaster, is that since everything is asynchronous, it's very difficult to resolve things in the proper order, aside from nesting within nesting within nesting. </p> <p>Hence my question - I'm getting to the point where it seems like ditching knockout completely is the answer here, which doesn't seem right. It feels like I'm very close but it still doesn't work properly. (Often things load in the wrong order.) Unfortunately I can't really post the code because it's huge.</p> <p>The thing is, it seems like it shouldn't be this hard. It feels like I'm missing a fundamental design pattern for knockout and drop down combos. Looking at the cart example, I'm starting to suspect that multi-layer cascading drop downs are just not feasible in knockout at the moment unless the data is all loaded ahead of time.</p> <p>Am I actually missing the design pattern? If so, please elucidate. If not, go ahead and say so. I guess whichever more people agree with will be accepted.</p> <p><strong>Update</strong> I realized after the first comment I got that I did not discuss much about some of the solutions I've tried.</p> <p>So, basically yes, I've tried subscribing to the change event. I should emphasize that at the beating heart of this problem lies the fact that all of our calls to load these dropdowns are network calls.</p> <p>The problem that happens is that the change event fires multiple times - once when you load the drop down, and again when the value is bound to the drop down. At least, that's been my experience.</p> <p>What ends up happening is that any subscription will then fire multiple times. When it does, it causes the load to happen multiple times. Aside from the fact that I don't want to fire multiple times, there are often issues where the drop downs will get loaded incorrectly. My guess is that one of the times arrived "out of order" than the others.</p> <p>I've gotten similar results with my various efforts. It really does seem to be pushing me toward some hackish stuff, like nesting 5 or 6 or 7 network calls inside of each other's callbacks. And it seems like there must be a better way. </p> <p>I've tried computed observables to similar effect. I've tried loading things once via the MVC viewbag, etc. Every time I try something, I'm stymied by either something loading weird, the knockout.mapping plugin behaving strangely (it apparently will not add its key/mapping functions to existing knockout observables) or just ... some other weird issue.</p> <p>Again, I ask, is this something knockout is simply incapable of? Is our situation just too peculiar? Or am I missing some method or function or object that would make all of this work?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBoB
    1. USBoB
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload