使用淘汰赛访问列表元素答案

【问题标题】：Access list elements with knockout使用淘汰赛访问列表元素
【发布时间】：2017-03-20 11:36:14
【问题描述】：

我有一个每行包含 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>

js 文件在此函数中，使用我的数据源加载列表后，我需要滚动列表并将“img”之一设置为可见 = true 或 false。

function trocarCodBar(m) {
AdataSource = loadDataSource();
viewModel.AdataSource(AdataSource);
//done...
for (var i = 0; i < viewModel.listItems().length; i++) {
    if(m=='bar')
    //set <img imcodb or imcodbqr visible false or true.
}}

查看

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;

【问题讨论】：

您可能希望将 devExtreme 添加到您的标签中。（我猜这就是 dxlist 是什么？）
是的，我使用的是 DevExtreme，dxList 是 DevExtreme 列表。
...您可能希望将其添加到您的标签中。

标签： knockout.js html-lists devextreme

【解决方案1】：

在淘汰视图模型中使用 html 元素不是一个好习惯。只需使用ko.observable 来管理动态渲染。

首先，在您的数据集中创建 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) }
]);

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

第一个是visible绑定：

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

https://jsfiddle.net/ofbugahL/

第二种方式是if绑定：

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

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

https://jsfiddle.net/0nkju2Lz/

接下来，如果要显示第一张图片，只需将firstImageVisible 字段设置为true，将secondImageVisible 字段设置为false。 Knockout 会自动更新您的列表。

【讨论】：