显示/隐藏基于敲除JS中的下拉选择，模型位于另一个模型中

Question

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

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

例如，假设我们在“Form Builder”下的“TextField”控件有以下“规则”

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/hideValue“规则”的文本输入字段。我需要获取isExpressionValueRequired 的值并根据该值显示/隐藏“Value”输入文本字段。

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

编辑 - 1：我的小提琴：

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

Answer 1

代码中的问题：

• 可见绑定：selectedValue 是 TextBoxViewModel 中的属性，不是 RuleConditionViewModel 中的属性。因此，visible: ruleConditions().selectedValue() 应该只是visible: selectedValue
• optionsValue: 'Value' 绑定告诉 knockout 仅存储规则条件的 Value 属性。即：它存储字符串isfilledout 或contains。移除它，整个对象就会被存储起来。
• 因为selectedItem 是一个字符串，所以计算出的表达式this.selectedItem() && this.selectedItem().isExpressionValueRequired 始终为假：string 原型没有名为isExpressionValueRequired 的属性。

https://jsfiddle.net/hxchstp9/