在 knockout.js 生成的广播列表中预选第一个选项

Question

我是 knockout.js 的新手，我设法生成了一个单选按钮列表。但我不知道如何预选列表中的第一个单选按钮。这是（我认为）代码重要部分的摘录：

knockout.js:

$.ajax({
    url: '/path/to/external/rest/api/' + zipCode,
    type: 'GET',
    context: document.body
}).done(
    function (response) {
        $.each(response, function(key, droppoint) {
            self.droppoints.push(droppoint);
        });
    }
).fail(

);

HTML:

<div data-bind="foreach: $parents[1].droppoints" >
  <label>
    <input class="droppoint_radio" type="radio"
           name="droppoint_location" 
           data-bind="attr: {value: number}" />
    <div class="droppoint_address">
      <div data-bind="text: company_name"></div>
    </div>
  </label>
</div>

Answer 1

您可以使用 checked 绑定控制一个单选按钮。您可以添加一个表示所选单选按钮的可观察对象 selectedPoint，并为该可观察对象分配第一个单选按钮的值。

根据您的 javascript，这可能如下所示：

viewModel.selectedPoint = ko.observable();

将 checked 绑定添加到 HTML:

<div data-bind="foreach: $parents[1].droppoints" >
    <label>
        <input class="droppoint_radio" type="radio"
            name="droppoint_location" 
            data-bind="attr: {value: number},
            checked: $parents[2].selectedPoint" />
        <div class="droppoint_address">
            <div data-bind="text: company_name"></div>
        </div>
    </label>
</div>

最后，在AJAX回调中将第一个放置点的编号设置为默认值：

$.ajax({
    url: '/path/to/external/rest/api/' + zipCode,
    type: 'GET',
    context: document.body
}).done(
    function (response) {
        $.each(response, function(key, droppoint) {
            self.droppoints.push(droppoint);
        });
        self.selectedPoint(response[0].number);
    }
)

在 knockout.js 生成的广播列表中预选第一个选项

Preselect first option on knockout.js generated radio list

knockout.js

magento2