显示/隐藏基于带有其他模型中的模型的基因敲除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 inTextBoxViewModel
, not inRuleConditionViewModel
. Therefore,visible: ruleConditions().selectedValue()
should only bevisible: selectedValue
- The
optionsValue: 'Value'
binding tells knockout to only store theValue
property of a rule condition. I.e.: it stores the stringisfilledout
orcontains
. Remove it, and the whole object is stored. - Because the
selectedItem
was a string, the computed expressionthis.selectedItem() && this.selectedItem().isExpressionValueRequired
was always false: thestring
prototype does not have a property namedisExpressionValueRequired
.
https://jsfiddle.net/hxchstp9/
这篇关于显示/隐藏基于带有其他模型中的模型的基因敲除JS中的下拉列表选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!