从JSON筛选屏幕上显示的数据
从JSON筛选屏幕上显示的数据
提问于 2016-01-28 08:38:58
我目前正在从事一个项目，在该项目中，我需要从JSON文件中获取数据并显示它，允许用户添加与预期值相匹配的输入。
但是我想在不同的时间显示不同的部分或屏幕，我希望首先显示第一个ID，当用户输入和按enter时，它应该显示下一批信息。
这是我的JSON
var jsonData = {
id: 1,
description: 'SCREEN 1',
screens: [
{
//LOCATION OF THE PART
id: 0,
flds: [
{ id: 0,
fldName: 'Location',
expected: 'L-MOTA56M',
input: 'L-'}
]
},
{
//PART INFORMATION FOR THE PICKER
id: 1,
flds: [
{ id: 0,
fldName: 'Part',
expected: 'P-1597531',
input: 'P-'},
{ id: 1,
fldName: 'Serial',
expected: 'S-6571687',
input: 'S-'},
{ id: 2,
fldName: 'Qty',
expected: 'Q-10',
input: 'Q-'}
]
}]
};正如你所看到的，里面有一个屏幕数组和一个fld数组，但是我想过滤它，购买屏幕ID
这是我当前的HTML：
<html>
<head>
<title>RDT</title>
</head>
<style>
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}
</style>
<body>
<div class="wrapper">
<h2><span data-bind="text: description"></span></h2>
<hr/>
</div>
<div class="RDT">
<ul data-bind="template: { name: 'screenTemplate', foreach: screens, as: 'screen' }">
</ul>
<script type="text/html" id="screenTemplate">
<span hidden="true" data-bind="text: id"></span>
<ul data-bind="template: { name: 'fldTemplate', foreach: flds }"></ul>
</script>
<script type="text/html" id="fldTemplate">
<span data-bind="text: fieldName, "></span>
<br/>
<span data-bind="text: expectedValue, style: {color: inputValue() == expectedValue() ? 'lime' : 'red'}"></span>
<br/>
<span hidden="true" data-bind="text: inputValue"></span>
<input data-bind="value: inputValue, valueUpdate: 'afterkeydown'" />
<h2>----------------------</h2>
</script>
</div>
<div class="wrapper">
<button data-bind="click: saveData">Save Data</button>
</div>这使用Knockout模板显示JSON文件中的数据
这是我的JavaScript：
<script>
$(function () {
var mapping = {
'screens': {
create: function (options) {
return new screenModel(options.data);
}
}
};
var screenModel = function (data) {
var self = this;
self.id = ko.observable(data.id);
ko.mapping.fromJS(data, fieldMapping, self);
};
var fieldMapping = {
'flds': {
create: function (options) {
return new fieldModel(options.data);
}
}
};
var fieldModel = function (data) {
var self = this;
self.fieldName = ko.observable(data.fldName);
self.expectedValue = ko.observable(data.expected);
self.inputValue = ko.observable(data.input);
};
var db = rdtApp.TransactionDataContext;
db.getTransaction("1", function (data) {
var viewModel = ko.mapping.fromJS(data, mapping);
console.log(ko.mapping.toJSON(viewModel));
// THIS ALL APPLIES TO THE BUTTON ON THE SCREEN
//IT IS TO START ALL OF THE SAVING PROCESS
var jsonArray = ko.observableArray();
saveData = function () {
var jsonDatas = ko.mapping.toJSON(viewModel)
if(confirm('Do you wan to save this data? \n \n' + jsonDatas) == true) {
jsonArray.push(jsonDatas);
alert(jsonArray().join('\n \n'));
console.log(jsonDatas);
} else {
console.log("You pressed Cancel");
}
}
ko.applyBindings(viewModel);
});
});
</script>这将从JSON文件中获取数据，并将其映射到我的模板中，但目前它只是一次显示所有信息
我希望它只显示位置(屏幕ID 0)部分，一旦输入，我希望它然后显示零件，串行和QTY(屏幕ID 1)。
有人能帮我做到这一点吗
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-28 13:19:28
我已经想明白了
需要使用<!-- ko if: --> <!--/ko-->
如图所示
<!-- ko if: showFlds -->
<span data-bind="text: id, as: 'id'"></span>
<ul data-bind="template: { name: 'fldTemplate', foreach: flds } "></ul>
<!--/ko-->然后将其添加到screenModel中。
self.showFlds = ko.computed(function () {
return (data.id == 0);
});现在我要做的就是点击enter来更改id号。
终于起作用了
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35056506
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号