Question

我正在制作＆＃34; Form Builder＆＃34;应用程序，我可以为每个控件设置规则。

我正在尝试从selectedValue中选择我保留为对象的下拉值。但它没有用。

为了深入理解我的问题，这是我之前的问题，您可以清楚地了解我的问题：

Show/Hide based on Dropdown selection in knockoutJS with model inside another model

这是我用来填充下拉值（当前问题）的小提琴：

https://jsfiddle.net/vikash208/6b6ntoam/20/

我尝试了什么：

HTML代码：

<div class="tab-content" data-bind="with: TextBoxModel">
<div class="tab-pane" id="rules" data-bind="with: rules">
                                    <div data-bind="foreach: ruleList">
                                        <div class="form-group col-md-12">
                                            <div class="col-sm-3">
                                                <select class="form-control" data-bind="options: $parent.ruleConditions, optionsText: 'Name', value: selectedCondition, optionsCaption: 'Choose condition'"></select>
                                            </div>
                                            <div class="col-md-5" data-bind="visible: isExpressionValueRequired()">
                                                <input type="text" class="form-control" data-bind="value: expressionValue" />
                                            </div>
                                    </div>
                                </div>

分配selectedOption的KnockoutJS：

var RuleConditionArray = {
  // Options for "Text Field" under Rules tab
    textField: ko.observableArray(
    [
    { Name: 'is filled out', 
      Value: 'isfilledout',
      isExpressionValueRequired: false 
    },

    { 
      Name: 'is not filled out', 
      Value: 'isnotfilledout', 
      isExpressionValueRequired: true 
    }
   ]
 )
};

function Rule() {
    var rule = this;

    //For Expression input field
    rule.expressionValue = ko.observable("");

    //Keep track of selected ruleConditions - returns "Condition object"
     rule.selectedCondition = ko.observable({ Name: 'is filled out', Value: 'isfilledout', isExpressionValueRequired: false });

    //This is computed value to show/hide Expression input field
    rule.isExpressionValueRequired = ko.computed(function () {
        return this.selectedCondition() &&     this.selectedCondition().isExpressionValueRequired
    }, this);
};

从上面的knockoutJS代码中，我正在传递

    { 
      Name: 'is filled out', 
      Value: 'isfilledout',
      isExpressionValueRequired: false 
    }

selectedCondition内的对象。但它没有用。

我想要的是什么：

我需要传递object作为参数来选择下拉值。请帮我解决这个问题。

Answer 1

您的<select>元素有options绑定传递给它的一系列选项。每个选项代表一个对象的实例。选择选项时，value绑定会确保将对象写入selectedCondition。

反过来说，当你设置selectedCondition时，淘汰赛会在选项数组中查看它是否是一个已知的选项。如果它能找到它，它将更新UI。

现在，此处的问题，就是您要将selectedCondition设置为与其中一个选项看起来相同的对象，但是不是一个实际的选项实例。

Knockout不使用（深层）对象比较方法来查找所选对象，它只是执行以下操作：options.indexOf(newSelection)。由于您已经创建了 new 对象，因此无法使用。

解决方案

将实际引用传递给selectedCondition，如下所示：

rule.selectedCondition = ko.observable(ruleModel.ruleConditions()[0]);

如果您想添加新选项，请先将其推送至options：

var newOption = { 
  Name: ko.observable(""), 
  Value: ko.observable(""), 
  isExpressionValueRequired: ko.observable(false) 
};

ruleModel.ruleConditions.push(newOption);
selectedCondition(newOption);

从data-bind =＆＃34; selectedValue＆＃34;填充下拉值在淘汰赛中

1 个答案:

解决方案