Question

我目前正在开发一个项目，我需要从JSON文件中获取数据并显示它，允许用户添加一个与预期值匹配的输入

但我想在不同的时间显示不同的部分或屏幕我希望首先显示第一个ID，当用户输入并按下输入时，它应显示下一批信息

这是我的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）

任何人都可以帮我实现这个目标

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

现在我需要做的就是按Enter键来更改身份证号码

终于搞定了

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

1 个答案: