Есть несколько строк, с каждой строкой есть переключатель с да и нет.На начальной странице загружайте каждую строку, имеющую значения «да» или «нет», которые мы получаем из базы данных.
Моя проблема: Как я могу предварительно выбрать значение радиосвязи при загрузке страницы в зависимости от значения базы данных для этой строки.
Делая переменную наблюдаемой для каждой строки, имеющей одинаковое значение для радио.
Использование Magento2, PHP 7, Knockout
- Мой файл Phtml items.phtml
define([
"moment",
"jquery",
"uiComponent",
"ko",
"Magento_Ui/js/modal/modal",
"tippy",
"blockUI"
], function(moment, $, Component, ko, modal, tippy) {
"use strict";
return Component.extend({
defaults: {
category_image: ko.observable(""),
category_name: ko.observable(""),
in_person_redemption_content: ko.observable(""),
online_redemption_content: ko.observable(""),
order_date: ko.observable(""),
order_reference: ko.observable(""),
quote_id: ko.observable(""),
grand_total: ko.observable(""),
customer_email: ko.observable(""),
vouchers: ko.observableArray([]),
ecodeUsedText: 'eCode marked as used'
},
initialize: function() {
this._super();
// console.log("Order Details");
this.bindEventListeners();
var self = this;
self.selected = ko.observable("1");
this.loadOrder();
//assign this to self so we can use it inside a function
},
bindEventListeners: function() {},
showUiBlock: function(el, message) {
$(el).block({
message: message
});
this.scroll();
},
hideUiBlock: function(el) {
$(el).unblock();
},
voucherCopy: function(parent, data) {
this.copyToClipboard(data.voucher_code);
},
copyToClipboard: function(text) {
var selected = false;
var el = document.createElement('textarea');
el.value = text;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
if (document.getSelection().rangeCount > 0) {
selected = document.getSelection().getRangeAt(0)
}
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
},
hideUiBlock1: function(el) {
return 1;
},
scroll: function() {
$("html, body").animate(
{
scrollTop: $(".blockElement").offset().top - 100
},
1000
);
},
loadOrder: function() {
var HISTORY_ENDPOINT = "/index.php/rest/V1/asas/PRE";
var payload = {
params: {
entity_attributes: {
order_reference: this.xyz_number,
guid: this.zyz_id
}
}
};
this.showUiBlock(".content-wrapper", "Loading your orders. Please wait.");
$.ajax({
url: HISTORY_ENDPOINT,
method: "POST",
data: JSON.stringify(payload),
contentType: "application/json"
})
.done(
function(response) {
this.hideUiBlock(".content-wrapper");
if (response[0].error_code != "1002") {
this.category_image(response[0].order_details.category_image);
this.category_name(response[0].order_details.category_name);
this.in_person_redemption_content(
response[0].order_details.in_person_redemption_content
);
this.online_redemption_content(
response[0].order_details.online_redemption_content
);
this.order_date(response[0].order_details.order_date);
this.order_reference(response[0].order_details.order_reference);
this.quote_id(response[0].order_details.quote_id);
this.grand_total(response[0].order_details.grand_total);
this.customer_email(response[0].order_details.customer_email);
this.vouchers(response[0].order_details.vouchers);
console.table(response[0].order_details.vouchers);
for(var i=0; i < this.vouchers().length; i++){
var self = this;
console.log(this.vouchers()[i].voucher_id);
this.vouchers()[i]['voucher_code_used_flag'] = ko.observable(1);
this.vouchers()[i]['voucher_code_used'] = ko.observable(this.vouchers()[i]['voucher_code_used']);
self.selected = ko.observable(this.vouchers()[i].voucher_code_used);
}
console.log(this.vouchers());
$(".showOrder").removeClass("hidden");
$('[data-toggle="tooltip"]').tooltip;
} else {
$(".noOrders").removeClass("hidden");
}
}.bind(this)
)
.error(function() {});
}
});
});
<ul class="nopad nomargin nobullet" data-bind="foreach: vouchers()">
<li class="content-block white-bg pad15 margin15bottom">
<div class="row">
<div class="col-sm-4 code-col">
<!-- ko ifnot: voucher_code_used -->
<img class="img-responsive" data-bind="attr: { src: code_image , alt: voucher_code }" />
<!-- /ko -->
<!-- ko if: voucher_code_used -->
<div><span class="" data-bind="text: $parent.ecodeUsedText"></span></div>
<!-- /ko -->
</div>
<div class="col-sm-8">
<div>
<span class="small-txt">eCode</span><br />
<div class="btn-group"><span class="bold e-code" data-bind="html: voucher_code"></span><button class="copy-button" data-toggle="tooltip" title="Copy eCode" data-placement="bottom" data-bind="click: function(data,event){$parent.voucherCopy($parent,data);}">Copy</button></div>
</div>
<!-- ko ifnot: online_voucher_code == null -->
<div><span class="small-txt">Online eCode</span><br /><span class="bold e-code" data-bind="html: online_voucher_code"></span><button class="copy-button" data-bind="click: voucherCopy" data-toggle="tooltip" title="Hooray!">Copy</button></div>
<!-- /ko -->
<div class="row">
<div class="col-sm-4 col-md-3 margin10top"><span class="small-txt">Type</span><br /><span class="bold" data-bind="html: product_name"></span></div>
<div class="col-sm-4 col-md-3 margin10top"><span class="small-txt">Expiry Date</span><br /><span class="bold" data-bind="html: expiry_date"></span></div>
<div class="col-sm-4 col-md-3 margin10top"><span class="small-txt">Price</span><br /><span class="bold">£<span data-bind="html: product_price"></span></div>
<div class="col-sm-4 col-md-3 margin10top">
<button type="button" class="btn btn-primary" data-bind="click: function(data,event){$parent.updateVoucherCodeUsedFlag($parent,data);}, text: $parent.voucher_code_used">
</button>
<div class="btn-group form-group voucher-code-used-containor" data-toggle="buttons" data-bind="radio: voucher_code_used_flag">
<input type="radio" value="0" data-bind="attr: { name: 'abc' + $index() + ' ' + $parent.vouchers()[$index()].voucher_code_used }, checked: $parent.selected" value="0"> 0<br>
<input type="radio" value="1" data-bind="attr: { name: 'abc' + $index() + ' ' + $parent.vouchers()[$index()].voucher_code_used }, checked: $parent.selected"> 1<br>
<input type="radio" data-bind="checked: $parent.vouchers().selected" value="female12"> Female12<br>
<span data-bind="text: voucher_id"></span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Данные, которые присваиваются массиву наблюдаемых ваучеров, будут выглядеть следующим образом
[{voucher_code: "ABC232323", product_price: "8.00", voucher_code_used : 1}
1: {voucher_code: "XXUZX3434", product_price: "8.00", voucher_code_used : 0}
2: {voucher_code: "PQR34e343", product_price: "8.00",voucher_code_used : 1}]
Как я могу создать и наблюдать значение для каждогорадио в ряду.Выбор радио по умолчанию будет зависеть от ключа voucher_code_used