Show data-attributes from selected Radio-Button with knockout js

Question

我是 knockoutjs 的新手，发现使用它有点困难。使用 jQuery 对我来说非常容易的事情，对淘汰赛根本不起作用......

在 Magento 2 商店上，我想显示所选运输方式的汇总数据。 “checked”绑定已用于 Magento 将运输方式设置为报价。现在我在输入元素中有一些自定义数据（例如运输名称、运输时间范围等），我想将其显示在“汇总”框中

应该是这样的

<div id="selected-method-summary">
    <span class="method-name" data-bind="text: selectedMethod.name"></span>
    <span class="method-timerange" data-bind="text: selectedMethod.timerange"></span>
    <span class="method-price" data-bind="text: selectedMethod.price"></span>
</div>

<div id="methods">
    <input type="radio" class="radio" value="method1" data-name="method 01" data-timerange="8:00 - 10:00" data-price="9,99€" data-bind="checked: element.isSelected">
    <input type="radio" class="radio" value="method1" data-name="method 02" data-timerange="10:00 - 12:00" data-price="9,99€" data-bind="checked: element.isSelected">
    <input type="radio" class="radio" value="method3" data-name="method 03" data-timerange="12:00 - 14:00" data-price="9,99€" data-bind="checked: element.isSelected">
</div>

然后我希望摘要块中的数据根据所选方法而变化。 "data-bind="checked: element.isSelected" 只返回一个值

isSelected: ko.computed(function () {
            return quote.shippingMethod() ?
                quote.shippingMethod()['carrier_code'] + '_' + quote.shippingMethod()['method_code'] :
                null;
        }),

我试图扩展这个“isSelected”方法，但我不知道如何在不破坏 magento 功能的情况下做到这一点

我怎么能意识到这一点？

提前谢谢你

Answer 1

要在 Magento 2 中使用 Knockout JS 显示所选单选按钮的数据属性，您可以按照以下步骤操作：

1. 使用要显示的数据向每个单选按钮元素添加数据属性。

例如，如果要显示每个产品选项的价格，可以为每个单选按钮元素添加一个data-price属性：

<input type="radio" name="product_options" value="option1" data-price="10.00">
<input type="radio" name="product_options" value="option2" data-price="20.00">
<input type="radio" name="product_options" value="option3" data-price="30.00">

2. 使用 Knockout JS 创建一个视图模型，跟踪选定的单选按钮并更新显示的数据属性。

define([
    'ko',
    'jquery'
], function(ko, $) {
    return function() {
        var self = this;
        
        self.selectedOption = ko.observable(null);
        self.selectedOptionPrice = ko.observable(null);
        
        $('input[name=product_options]').on('change', function() {
            var selectedOption = $('input[name=product_options]:checked');
            self.selectedOption(selectedOption.val());
            self.selectedOptionPrice(selectedOption.data('price'));
        });
    };
});

3. 将视图模型绑定到单选按钮元素。

<div data-bind="foreach: options">
    <input type="radio" name="product_options" data-bind="value: value, checked: $parent.selectedOption">
    <span data-bind="text: label"></span>
</div>

<p data-bind="text: 'Price: ' + selectedOptionPrice()"></p>

此代码假定您在视图模型中有一组产品选项，您正在使用 foreach 绑定对其进行迭代。每个选项的值和标签分别绑定到单选按钮和跨度元素。

selectedOption observable 绑定到单选按钮元素的 checked 属性，因此当用户选择新选项时它会自动更新。

当单选按钮选择发生变化时，selectedOptionPrice observable 会通过监听单选按钮元素上的更改事件并相应地更新可观察值来手动更新。