javascript - Show different form fields based on selection -

javascript - Show different form fields based on selection -

jsfiddle

i using knockout.js in various parts of project. i'm looking advice on best way accomplish adding html content form based on user has selected.

i set jsfiddle believe makes clear i'm trying accomplish.

if user selects options 1 or 2, html markup data-configuration="1,2" added form. if user selects alternative 3, html markup data-configuration="3" added form.

i have few ideas how (hooking alter event of select list), but, wondering if had improve "knockout" way of accomplishing this.

one other thought create binding handler gives more command on behavior.

http://jsfiddle.net/drp3d/

it requires jquery written (but create code more concise).

essentially, looks @ bound value, looks @ attribute used in html (data-configuration) , hides or shows given element based on comparing of value configuration.

ko.bindinghandlers.showtype = { update: function(element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext) { var $element = $(element); var config = $(element).attr('data-configuration'); var value = ko.utils.unwrapobservable(valueaccessor()); config = config.split(','); var found = false; for(var i=0, len=config.length; < len; i++) { if (value == config[i]) { found = true; break; } } if (found) { $element.show(); } else { $element.hide(); } } };

javascript knockout.js