顯示/隱藏基於帶有其他模型內部模型的基因敲除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/