使用淘汰赛 Js 将嵌套数组渲染为 HTML 时，我的逻辑有啥问题？

Posted 2023-03-27

【中文标题】使用淘汰赛 Js 将嵌套数组渲染为 HTML 时，我的逻辑有啥问题？

【英文标题】：Whats wrong with my logic when rendering a nested Array into HTML using knockout Js?使用淘汰赛 Js 将嵌套数组渲染为 HTML 时，我的逻辑有什么问题？

【发布时间】：2019-05-21 11:45:53

【问题描述】：

我正在对一个项目进行原型设计，并且有一堆乱七八糟的代码。我坚持的这个原型的特定部分是无法使用敲除从 JSON 文件中迭代和渲染嵌套数组。以下是一些事实：

作为问题的特定键的值是一个列表。 我在 JSON“响应”中所指的每个项目都是“问题”和“答案” 问题只是一个字符串 答案是列表 我将“答案”中的每个项目分解并插入到 html 中的单选按钮中 当淘汰赛完成它的事情时，每个项目都会通过单选按钮渲染的每个迭代一起返回。 qna obj 来自一个函数，该函数通过调用基于“sub”的 json 文件过滤输入，删除顶部节点，只留下

这是这个案例的样子[抱歉，没有足够的代表点来嵌入图像，tinypic 必须这样做！]

http://i64.tinypic.com/25i26xl.png

我是使用淘汰赛 js 的新手，我已经阅读了官方文档，但我承认我在理解它时遇到了一些麻烦

这是代码行问题，任何建议都将不胜感激。

//questions.json
[
      
        "question": "Are you a buyer, seller or renter?",
        "answers": ["Buyer", "Seller", "Renter"]
      ,
      
        "question": "Second question",
        "answers": ["yes", "no"]
      
   ]

1

// functions.js
function questionDisplay() 
  var self = this;
  self.data = ko.observableArray(qna);


function initQuestionDisplay() 
  var qnaDataModel = new questionDisplay();
  $("#questionsDisplay").modal("show");
  ko.applyBindings(qnaDataModel);

2

<!-- test.html --!>
<div
            class="modal-body"
            data-bind="template: name: 'template', data: $data"
          ></div>
          <script type="text/html" id="template">
            <div class="diplay-frame" data-bind="foreach: data: data, as: '_data'">
              <div class="question-box">
                  <h2 class="question" data-bind="text: _data['question']"/>
                  <p class="answers" data-bind="text: _data['answers']"/>
                  <div data-bind="foreach: _data['answers']">
                      <input type="radio" name="optionsGroup" data-bind="checked: _data['answers']" />
                      <span data-bind="text: _data['answers']"></span>
                  </div>

【参考方案1】：

你离得很近。不过有几点需要注意。

当你想用knockoutjs绑定东西时，尽可能使用像<p data-bind="text: item"></p>这样的结束标签，而不是像<p data-bind="text: item" />这样的自我结束标签。该规则的例外是那些像<input data-bind="value: somevalue" /> 这样自闭合的标签。这将消除一系列错误。我已经被这个问题抓了很多次了。 单选按钮需要按名称分组，以便所选值仅适用于指定的单选按钮组。这会将所选答案限制为仅与答案相关的问题，而不是页面上呈现的所有答案。

var vm = arrayOfItems : [ 'item1','item2']<ul data-bind="foreach: arrayOfItems"> <li data-bind="text: $data"></li> </ul>

当您在 foreach 绑定标签内时，您可以使用名为 $data 的当前迭代数据上下文来引用当前项目。 可以在这里找到更好的解释。 - Knockout Binding Context

我已经使用您提供的内容包含了一个工作示例。

有一个“学习”部分，它将带您了解有关使用 Knockoutjs 的非常全面的教程。

Knockoutjs Tutorial

var qna = [
      
        "questionId": "1",
        "question": "Are you a buyer, seller or renter?",
        "answers": ["Buyer", "Seller", "Renter"]
      ,
      
        "questionId": "2",
        "question": "Second question",
        "answers": ["yes", "no"]
      
   ];
   
// functions.js
function questionDisplay() 
  var self = this;
  var mappedData = qna.map(function(item)
    item.optionGroupName = "optionGroup_" + item.questionId;
    item.selectedAnswer = ko.observable();
    return item;
  );
  self.data = ko.observableArray(mappedData);


function initQuestionDisplay() 
  var qnaDataModel = new questionDisplay();
  //$("#questionsDisplay").modal("show");
  ko.applyBindings(qnaDataModel);
   

initQuestionDisplay();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="modal-body" data-bind="template: name: 'template', data: $data"></div>
<script type="text/html" id="template">
<div class="diplay-frame" data-bind="foreach: data: data, as: '_data'">
  <div class="question-box">
    <h2 class="question" data-bind="text: _data['question']"></h2>
    <p class="answers" data-bind="text: _data['answers']"></p>
    <div data-bind="foreach: data: _data['answers'], as: 'answer'">
      <input type="radio"  data-bind="checked: $parent.selectedAnswer, attr:name: $parent.optionGroupName, value: $data" />
      <span data-bind="text: answer"></span>
    </div>
  </div>
</div>
</script>

<h2>Results</h2>
<ul data-bind="foreach: data">
  <li>
    Question: <span data-bind="text: question"></span>
    Answer: <span data-bind="text: selectedAnswer"></span>
  </li>
</ul>

【讨论】：

感谢您的笔记！非常简洁！我会在我的声望达到 15 的时候投票，再次感谢。