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

Question

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 1

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. Ie: 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/