显示/隐藏基于带有其他模型内部模型的基因敲除JS中的下拉列表选择

Question

我正在为表单生成器制定“规则”。

我想根据选定的下拉菜单显示/隐藏文本框。

例如，假设我们在“表单生成器”下的“文本字段”控件具有以下“规则”

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

1       TextBox_1                    Is filled out             (Text Input NOT REQUIRED)

2       TextBox_2                        Contains                         Hi

根据以上内容，对于规则1，不需要文本输入，对于规则2，则需要文本输入。

以上是我的情况。

我试过的

HTML内容：

 //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内容：

我有两个视图模型。

1) FormViewModel

2) TextBoxViewModel

另外，我有一个数组，其中包含下拉菜单的options 。

我的实现如下：

//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);

我得到的是：

从上面的代码中，我可以用值填充下拉列表。

我没有得到：

我无法show/hide “规则”的“ Value文本输入字段。 我需要获取isExpressionValueRequired的值，并基于此值显示/隐藏“ Value ”输入文本字段。

我为此感到震惊。 请帮助我摆脱这个。

编辑-1：我的小提琴：

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

Answer 1

您的代码中的问题：

• 可见的绑定： selectedValue是TextBoxViewModel的属性， 而不是 RuleConditionViewModel中的RuleConditionViewModel 。 因此， visible: ruleConditions().selectedValue()仅应visible: selectedValue
• optionsValue: 'Value'绑定告诉淘汰对象仅存储规则条件的Value属性。 即：它存储字符串isfilledout或contains 。 删除它，并存储整个对象。
• 因为selectedItem是字符串，所以计算表达式this.selectedItem() && this.selectedItem().isExpressionValueRequired始终为false： string原型没有名为isExpressionValueRequired的属性。

https://jsfiddle.net/hxchstp9/