显示/隐藏基于带有其他模型中的模型的基因敲除JS中的下拉列表选择 [英] 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

从上面开始，对于规则1，不需要文本输入，对于规则2，则需要文本输入.

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

以上是我的情况.

我尝试过的事情:

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的下拉列表.

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

我的实现如下:

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

我得到的:

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

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

我没有得到的东西:

我无法为的show/hide Value文本输入字段.我需要获取isExpressionValueRequired的值，并基于此值显示/隐藏"Value"输入文本字段.

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.

编辑-1:我的小提琴:

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

推荐答案

代码中的问题:

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

• 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/

这篇关于显示/隐藏基于带有其他模型中的模型的基因敲除JS中的下拉列表选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！