仅在满足特定条件时选择绑定“optionsCaption”显示

Question

我的 Magento2 结帐上有一个 KO.js 脚本

return Component.extend({
        defaults: {
            template: 'Magento_NegotiableQuote/shipping-address/list',
            visible: addressList().length > 0,
            showOptionCaptionText:addressList().length > 1,
            rendererTemplates: [],
            AddressList: [],            
            DropdownComponentRendererIndex:50
        }

        /**
         * Render My Custom Component 
         */
        createRendererDropdownComponent: function() {
              var rendererTemplate, templateData, rendererComponent;

              rendererTemplate = utils.extend({}, DropdownRendererTemplate);

              templateData = {
                    parentName: this.name,
                    name: 'shipping-addressall-dropdown'
                };

              rendererComponent = utils.template(rendererTemplate, templateData);               
              this.selectedItem = ko.observable(); 

              this.selectedItem.subscribe(function(latest){
                  selectShippingAddressAction(latest);
                  checkoutData.setSelectedShippingAddress(latest,latest.getKey());
                  this.createNewRendererComponent(latest,0);
                  },this);

              utils.extend(rendererComponent, {
                    allAddress: ko.observableArray(this.AddressList),
                    selectedItem: this.selectedItem,
                    showOptionCaptionText:this.showOptionCaptionText,
                });  

             layout([rendererComponent]);                
             this.rendererComponents[this.DropdownComponentRendererIndex] = rendererComponent;


        }

<div class="field addresses">
    <div class="control">
       <select  class="select select2" name="shipping_address_id" data-bind="
        options: allAddress,
        optionsText:addressOptionsText,
        optionsCaption: '---Please Select Address --',
        value: selectedItem" afterRender="selectTwo()">
        </select>  

    </div>     
</div>

是否可以根据条件添加 optionsCaption 文本？我在下面附上了一张图片，如果该值为 false 我想删除 optionsCaption 文本吗？所以基本上我想要的是如果下拉菜单上只有一个可供选择的项目然后自动选择它，如果有多个选项然后显示占位符文本 ---SELECT--- 。

Answer 1

我在这里在黑暗中拍摄（尚未测试），但我认为您可以计算选项标题。

computedCaption: ko.computed(function () {
    return addressList().length > 1 ? 'Select address' : null;
})

然后像这样构建您的选择

<select ... data-bind="
    ....
    optionsCaption: computedCaption(),
    ....
</select>