Show/Hide 基于模型在另一个模型中的 knockoutJS 中的下拉选择

Question

我正在为表单生成器开发 "Rules"。

我想show/hide基于所选下拉列表的文本框。

例如，让我们假设我们在 "Form Builder"

下有一个 "TextField" 控件的以下 "Rules"

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 "Rules" 的文本输入字段。我需要根据此值获取 isExpressionValueRequired 和 show/hide“Value”输入文本字段的值。

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

编辑 - 1：我的 Fiddle:

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/

Show/Hide 基于模型在另一个模型中的 knockoutJS 中的下拉选择

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

html

javascript

jquery

formbuilder

knockout.js