Knockout.js 使用敲除键访问列表元素

我有一个每行2个图像的列表，在用我的数据源填充列表后，我需要根据用户的选择将其中一个图像设置为“visible=false”，我无法访问列表元素以将其中一个图像设置为false

列表html

            <div data-bind="dxList: {items: listItems, dataSource: AdataSource, pullRefreshEnabled: true }" id="lxDados">
            <div data-options="dxTemplate : { name: 'item' } " id="dxtemp">

                <div class="us-linha-img">
                    <span class="dx-icon-map icon us-itens-linha"></span>
                    <span class="us-itens-linha" data-bind="text: evento"></span>
                </div>

                <img id="imcodb" data-bind="attr: { src: $data.codbar, alt: $data.codbar }" />
                <br />
                <img id="imcodbqr" data-bind="attr: { src: $data.codbarqr, alt: $data.codbar }" />

            </div>
        </div>

---

在淘汰视图模型中使用html元素不是一个好的实践。仅用于管理动态渲染

首先，在数据集中创建observables字段，如下所示：

vm.dataSource = ko.observableArray([
    { text: "a", firstImageVisible: ko.observable(true), secondImageVisible: ko.observable(false) },
    { text: "b", firstImageVisible: ko.observable(true), secondImageVisible: ko.observable(false) },
    { text: "c", firstImageVisible: ko.observable(true), secondImageVisible: ko.observable(false) }
]);

在您的情况下，有两种方法可以更改图像可见性

第一个是绑定：

第二种方式是绑定：

---

接下来，如果要显示第一幅图像，只需将

firstImageVisible

字段设置为

true

，将

secondImageVisible

字段设置为

false

。Knockout会自动更新您的列表。

您可能需要将devExtreme添加到标记中。（我猜这就是dxlist？）是的，我使用的是DevExtreme，dxlist是DevExtreme列表……您可能想将其添加到标记中。

var viewModel = {
bloadpanel: ko.observable(false),
AdataSource: null,
listItems: ko.observableArray(),
trocarCodBarBar: function () {
    trocarCodBar("bar");
},
trocarCodBarQR: function () {
    trocarCodBar("qrc");
},
viewShown: function () {
    //alterar valores na inicialização
},
title: ko.observable("Pedido: " + params.id)};
viewModel.AdataSource = AdataSource;
return viewModel;

vm.dataSource = ko.observableArray([
    { text: "a", firstImageVisible: ko.observable(true), secondImageVisible: ko.observable(false) },
    { text: "b", firstImageVisible: ko.observable(true), secondImageVisible: ko.observable(false) },
    { text: "c", firstImageVisible: ko.observable(true), secondImageVisible: ko.observable(false) }
]);

<img data-bind="attr: { src: '...' }, visible: firstImageVisible "/>
<img data-bind="attr: { src: '...' }, visible: secondImageVisible "/>

<!-- ko if: firstImageVisible -->
<img data-bind="attr: { src: '...' } "/>
<!-- /ko -->

<!-- ko if: secondImageVisible -->
<img data-bind="attr: { src: '...' } "/>
<!-- /ko -->