knockout.js 挖空模板仅显示最后一个值

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

我创建了一个元素来计算产品价格的划分,只要产品有价格,就会创建该元素。
所有计算均成功,但在值视图模板中仅显示最后一次计算,在控制台中,值仅在未带来正确元素的模板中正确。
控制台:enter image description here
詹:

return Component.extend({

        defaults: {
            display: ko.observable(true),           
        },

        initialize: function () {
            this._super();
            this.maxInstallments = ko.observableArray();
            this.getMaxInstallment();
            console.log(this.maxInstallments[0]);
        },

        getMaxInstallment: function(){
            var value_for_calc      = $(this.value_for_calc).val();
            console.log('price ' + value_for_calc + " for product id " + this.product_id);
            this.maxInstallments    = this.getInstallments(value_for_calc).slice(-1);
        },
        getInterest: function(){
            return this.interest;
        },
        getValueForCalc: function(){
            return $(this.value_for_calc).val();
        },
        getTypeInterest: function(){
            return this.type_interest;
        },
        getLimitByPlotPrice: function(){
            return this.limite_by_price;
        },
        getLimitByPortionNumber: function(){
            return this.limite_by_installment;
        },
        getInstall: function (value_for_calc) {
            var valor           = parseFloat(value_for_calc);
            var type_interest   = this.getTypeInterest();
            var info_interest   = this.getInterest();
            var min_installment = this.getLimitByPlotPrice();
            var max_installment = this.getLimitByPortionNumber();
            var json_parcelas   = {};
            var count = 0;
            json_parcelas[1] = 
                        {'parcela' : priceUtils.formatPrice(valor),
                         'juros' : 0
                        };
            var max_div = (valor/min_installment);
                max_div = parseInt(max_div);
            if(max_div > max_installment) {
                max_div = max_installment;
            }else{
                if(max_div > 12) {
                    max_div = 12;
                }
            }
            var limite = max_div;
            _.each( info_interest, function( key, value ) {
                if(count <= max_div){
                    value = info_interest[value];
                    if(value > 0){
                        var taxa = value/100;
                        if(type_interest == "compound"){
                            var pw = Math.pow((1 / (1 + taxa)), count);
                            var parcela = ((valor * taxa) / (1 - pw));
                        } else {
                            var parcela = ((valor*taxa)+valor) / count;
                        }
                        var total_parcelado = parcela*count;
                        var juros = value;
                        if(parcela > 5 && parcela > min_installment){
                            json_parcelas[count] = {
                                'parcela' : priceUtils.formatPrice(parcela),
                                'juros' : juros,
                            };
                        }
                    } else {
                        if(valor > 0 && count > 0){
                            json_parcelas[count] = {
                                    'parcela' : priceUtils.formatPrice((valor/count)),
                                    'juros' : 0,
                                };
                        }
                    }
                }
                count++;    
            });
            _.each( json_parcelas, function( key, value ) {
                if(key > limite){
                    delete json_parcelas[key];
                }
            });
            return json_parcelas;
        },        
        getInstallments: function (value_for_calc) {
            var temp = _.map(this.getInstall(value_for_calc), function (value, key) {
                if(value['juros'] == 0){
                    var info_interest = " sem juros";
                } else {
                    var info_interest = "*";
                }
                return {
                            'qty': key,
                            'installments': value['parcela'],
                            'info_interest': info_interest
                };

            });
            var newArray = [];
            for (var i = 0; i < temp.length; i++) {
                if (temp[i].installments!='undefined' && temp[i].installments!=undefined) {
                    newArray.push(temp[i]);
                }
            }
            return newArray;
        }
     });
 });

HTML格式:

<div class="price-box price-final_installment" data-role="priceBox" data-product-id="<?php echo $block->getProductId(); ?>">
    <div class="block-installment-<?php echo $block->getProductId(); ?>" data-bind="scope: 'installment'">
        <input type="hidden" name="price-for-calc" value="<?= /* @escapeNotVerified */ $block->getCalcForPrice(); ?>" id="product-id-installment-<?php echo $block->getProductId(); ?>">
        <!-- ko if: display() -->

            <div class="installment-price" data-bind="foreach: maxInstallments">
                <span data-bind="i18n: 'ou '"></span>
                <span data-bind="text: qty"></span>
                <span data-bind="i18n: 'x de '"></span>
                <span data-bind="text: installments"></span>
                <span data-bind="text: info_interest"></span>
            </div>

        <!-- /ko -->
        <!-- ko ifnot: display() -->
             <p class="empty-text" data-bind="text: $t('Você pode parcelar sua compra em até 12x.')"></p>
        <!-- /ko -->
    </div>
</div>
<script type="text/x-magento-init">
 { ".block-installment-<?php echo $block->getProductId(); ?>": {
         "Magento_Ui/js/core/app": {
             "components": {
                 "installment": {
                    "component": "O2TI_Installment/js/view/installment",
                    "product_id": "<?= /* @escapeNotVerified */  $block->getProductId() ?>",
                    "value_for_calc": "#product-id-installment-<?= /* @escapeNotVerified */  $block->getProductId() ?>",
                    "interest": <?= /* @escapeNotVerified */  json_encode($block->getInfoInterest()) ?>,
                    "type_interest": "<?= /* @escapeNotVerified */  $block->getTypeInterest() ?>",
                    "limite_by_price": <?= /* @escapeNotVerified */  $block->getLimitByPlotPrice() ?>,
                    "limite_by_installment": <?= /* @escapeNotVerified */  $block->getLimitByPortionNumber() ?>
                 }
             }
         }
     }
 }
 </script>
vlurs2pr

vlurs2pr1#

该解决方案由@Sutil转发:
“范围:'installment'“为:范围:'安装-获取产品ID()?〉'“

相关问题