Vikash Vikash - 1 month ago 5
jQuery Question

Show/Hide based on Dropdown selection in knockoutJS with model inside another model

I am working on "Rules" for form builder.

I want to show/hide text box based on the dropdown selected.

For example, let us assume we have a following "Rules" for a "TextField" control under "Form Builder"

Rule# Control(dropdown) Condition(dropdown) Value(as input textbox)

1 TextBox_1 Is filled out (Text Input NOT REQUIRED)

2 TextBox_2 Contains Hi


From the above, for Rule 1, the text input is not required and for Rule 2, Text Input is required.

The above is my scenario.

What I tried:

HTML content:

//Dropdown for "Condition"

<select
class="form-control"
data-bind="
value: selectedValue
options: ruleConditions().options(),
optionsText: 'Name',
optionsValue: 'Value',
optionsCaption: 'Choose condition'">
</select>


//Input text field for "Value"

<input
type="text"
class="form-control"
data-bind="visible: ruleConditions().selectedValue()" />


KnockoutJS Content:

I have two view Models.

1) FormViewModel


2) TextBoxViewModel


Also, I have one array which contains
options
for the dropdown.

And my implementation are as follows:

//Options Available in Array

var RuleConditionArray = {

// Options for "Text Field" under Rules tab

textFieldConditions: ko.observableArray
(
[
{
Name: 'is filled out',
Value: 'isfilledout',
isExpressionValueRequired: false
},

{
Name: 'contains',
Value: 'contains',
isExpressionValueRequired: true
}
]
)
};

//Form View Model
function FormVM() {
var self = this;

self.textBoxVM = ko.observable(new TextBoxViewModel(Id,Name));
}

//TextField View Model
function TextBoxViewModel(Id, Name) {
var Txt = this;

Txt.CommonProperties = new CommonViewModel(Id, Name);

// Initialize Rule Conditions from Array.
Txt.ruleConditions = ko.observable(new RuleConditionViewModel(RuleConditionArray.textFieldConditions()));

Txt.selectedItem = ko.observable();

Txt.selectedValue = ko.computed(function () {
return this.selectedItem() && this.selectedItem().isExpressionValueRequired
}, this);

}

formView = new FormVM();
ko.applyBindings(formView);


What I get:

From the above code, I am able to populate the dropdown with values.

What I did not get:

I am unable to
show/hide
Value
text input field for "Rules". I need to get the value of
isExpressionValueRequired
and show/hide "
Value
" input text field based on this value.

I am struck with this. Kindly help me to get rid off this.

Edit - 1 : My Fiddle:

https://jsfiddle.net/vikash208/z4x5meua/3/

Answer

The problems in your code:

  • The visible binding: selectedValue is a property in TextBoxViewModel, not in RuleConditionViewModel. Therefore, visible: ruleConditions().selectedValue() should only be visible: selectedValue
  • The optionsValue: 'Value' binding tells knockout to only store the Value property of a rule condition. I.e.: it stores the string isfilledout or contains. Remove it, and the whole object is stored.
  • Because the selectedItem was a string, the computed expression this.selectedItem() && this.selectedItem().isExpressionValueRequired was always false: the string prototype does not have a property named isExpressionValueRequired.

https://jsfiddle.net/hxchstp9/