Question

我正在制作＆＃34;规则＆＃34;表格制作者。

我想根据所选的下拉列表显示/隐藏文本框。

例如，我们假设我们有以下规则＆＃34;规则＆＃34;对于＆＃34; TextField＆＃34; ＆＃34; Form Builder＆＃34;

下的控制

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

我得到了什么：

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

我没得到的东西：

我无法{＆＃34}规则＆＃34;的show/hide Value文字输入字段。我需要获取isExpressionValueRequired的值并显示/隐藏＆＃34; Value＆＃34;输入基于此值的文本字段。

我很震惊。请帮我摆脱这个。

编辑 - 1：我的小提琴：

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

Answer 1

代码中的问题：

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

https://jsfiddle.net/hxchstp9/

显示/隐藏基于knockoutJS中的下拉选择与模型在另一个模型中

1 个答案: