在 knockoutJS 中从 data-bind="selectedValue" 填充下拉值

Question

我正在开发“Form Builder”应用程序，我可以在其中为每个控件设置规则。

我正在尝试从我保留为对象的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 中的对象。但它不起作用。

我想要什么：

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

Answer 1

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

反过来，当您设置selectedCondition 时，knockout 会在选项数组中查看它是否是已知的选项。如果它可以找到它，它将更新 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);