我有一个每行 2 张图像的列表,用我的数据源填充列表后,我需要根据用户的选择将其中一个图像设置为"visible = false",我无法访问列表元素来设置其中一个图像 = false
列表网页
<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;
在挖空视图模型中使用 html 元素不是一个好的做法。只需使用 ko.observable 来管理动态渲染。
首先,在数据集中创建可观察量字段,如下所示:
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 "/>
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
。挖空会自动更新您的列表。