从 JSON 过滤屏幕上显示的数据答案

【问题标题】：Filter data displayed on screen from JSON从 JSON 过滤屏幕上显示的数据
【发布时间】：2016-05-05 12:49:48
【问题描述】：

我目前正在从事一个项目，我需要从 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>

这使用敲除模板来显示来自 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）部分，一旦输入，我希望它显示部件、序列号和数量（屏幕 ID 1）

谁能帮我实现这个目标

【问题讨论】：

有一个可见的绑定：knockoutjs.com/documentation/visible-binding.html。也许对你有帮助。
@joseLuis 我已经通读了几次并尝试了不同的解决方案，但仍然没有达到预期的效果
你会想要一个 currentScreen 在你的视图模型中观察到。使用data-bind="visible: currentScreen() == $index()" 或类似的

标签： javascript html json knockout.js

【解决方案1】：

我想通了

需要使用 

如图所示

<!-- 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);
         });

我现在需要做的就是按回车键更改身份证号

终于搞定了

【讨论】：