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

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

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

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

综上所述，对于规则1，不需要文本输入，对于规则2，需要文本输入

以上是我的设想

我的尝试：

 //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()" />

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

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()" />

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

我得到的：

 //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()" />

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

通过上面的代码，我可以用值填充下拉列表

我没有得到的：

 //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()" />

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

我无法显示/隐藏“规则”的文本输入字段。我需要获取

isExpressionValueRequired

的值，并根据该值显示/隐藏“

值

”输入文本字段

我被这件事深深打动了。请帮我摆脱这个

编辑-1：我的小提琴：

 //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()" />

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

---

代码中的问题：

• 可见绑定：

  selectedValue

  是

  TextBoxViewModel

  中的属性，而不是

  RuleConditionViewModel

  中的属性。因此，

  visible:ruleConditions（）.selectedValue（）

  只应是

  visible:selectedValue

• 选项Value:'Value'

  绑定告诉knockout只存储规则条件的

  值

  属性。即：它存储字符串

  isfilledout

  或

  contains

  。移除它，整个对象将被存储
• 由于

  selectedItem

  是一个字符串，因此计算表达式

  this.selectedItem（）&&this.selectedItem（）.isExpressionValueRequired

  始终为false:

  string

  原型没有名为

  isExpressionValueRequired

  的属性

---

代码中的问题：

• 可见绑定：

  selectedValue

  是

  TextBoxViewModel

  中的属性，而不是

  RuleConditionViewModel

  中的属性。因此，

  visible:ruleConditions（）.selectedValue（）

  只应是

  visible:selectedValue

• 选项Value:'Value'

  绑定告诉knockout只存储规则条件的

  值

  属性。即：它存储字符串

  isfilledout

  或

  contains

  。移除它，整个对象将被存储
• 由于

  selectedItem

  是一个字符串，因此计算表达式

  this.selectedItem（）&&this.selectedItem（）.isExpressionValueRequired

  始终为false:

  string

  原型没有名为

  isExpressionValueRequired

  的属性

---

---

您的

元素中是否缺少一个

值：selectedItem

数据绑定？我试过了。但是不起作用。我尝试了来自

StackOverflow

和

jsFiddle

的不同解决方案。例如，我在JSFIDLE中尝试了这个解决方案，它最适合我的方法，但不适合我的场景。@user3297291您是否可以增加点数，以便许多用户可以看到这个问题并快速得到解决？获得快速答案的最佳方法通常是创建一个FIDLE或stack代码段，其中包含足够的代码来重现您的问题。谢谢。我将很快创建并向您介绍小提琴。您的

元素中是否缺少

值：selectedItem

数据绑定？我尝试过。但是不起作用。我尝试了来自

StackOverflow

和

jsFiddle

的不同解决方案。例如，我在JSFIDLE中尝试了这个解决方案，它最适合我的方法，但不适合我的场景。@user3297291您是否可以增加点数，以便许多用户可以看到这个问题并快速得到解决？获得快速答案的最佳方法通常是创建一个FIDLE或stack代码段，其中包含足够的代码来重现您的问题。谢谢。我很快就会为你创作小提琴。非常感谢。我有一个问题。如何将所选值映射到类似“编辑选项”的下拉列表@User3297291我不明白你的意思。现在，如果我想通过模型设置下拉列表的值。我认为在

数据绑定

中使用

值

是不可能的。因为，我们将整个对象存储在

value

下，您必须将其设置为

ruleConditions（）.options（）中的一个对象。例如：
Txt.selectedItem（ruleConditions（）.options（）[0]）
非常感谢。我有一个问题。如何将所选值映射到类似“编辑选项”的下拉列表@User3297291我不明白你的意思。现在，如果我想通过模型设置下拉列表的值。我认为在
数据绑定
中使用
值
是不可能的。因为，我们将整个对象存储在
value
下，您必须将其设置为
ruleConditions（）.options（）中的一个对象。例如：
Txt.selectedItem（ruleConditions（）.options（）[0]）