knockout.js 选择绑定'optionsCaption'仅在满足特定条件时显示

56lgkhnf  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(130)

我的Magento 2结账上有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--。

k10s72fa

k10s72fa1#

我在黑暗中拍摄这里(还没有测试它),但我认为你可以使选项标题计算。

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

然后像这样构建您选择

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

相关问题