Question

我正在研究这个项目原型。现在，当前部分正在处理敲除js的“多重绑定”问题。我已经阅读了不同的方法，其中包括在HTML中引用数据模型时使用“ with”语句。我还阅读了在处理各种数据模型以进行渲染时使用clearNode可能是另一种可能的解决方案。这是有关我当前问题的一些事实。

我正在使用两个不同的数据模型，每个模型都是使用两个不同的JSON响应/文件（本地和api）创建的
使用和渲染敲除绑定的第一个模式是“ questionDisplay”
我使用Google文档捕获了要包含在表单提交中的输入（无关紧要，但在代码中解释了一些校准）
在提交表单期间，信息将发送到Google驱动器文件，并且“下一步”按钮将触发“ resultDisplay”模式
此刻出现了问题，我得到了“多重绑定”

我尝试使用“ with”语句“敲出”每个敲除模板的确切模型，但是我在想，因为它们仅在函数调用期间被实例化而无法访问？我不知道如何开始重构代码以能够使用“ with”语句。

我也尝试过clearNode，通过在根目录中包含一个id名称（其中敲除项声明数据模型的名称），在第二次KO渲染期间在clearNode中使用id……想法是可以清除然后重用同一节点。尽管在我提供的代码段中，我在透明节点中使用了“模板”，因为我尝试了每个节点，所以碰巧这是我尝试的最后一个节点

我还读到在'.applyBindings'期间，我是否可以包括元素名称以也包括它？我尝试了几件事都没有成功。

PS：我应该再说一遍，这是原型代码，因此，非常混乱。呼喊内森·费舍尔（https://stackoverflow.com/users/29467/nathan-fisher）！

JS

//functions.js
function resultDisplay() {
  parseJsonWithSelect();
  var self = this;
  self.data = ko.observableArray(jresponse);
}

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 initResultDisplay() {
  var dataModel = new resultDisplay();
  ko.cleanNode("template");
  ko.applyBindings(dataModel);
  $("#searchResultDisplay").modal("show");
}

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

HTML

<!-- Questions modal -->
<div
  class="modal fade"
  id="questionsDisplay"
  tabindex="-1"
  role="dialog"
  aria-labelledby="questionsDisplayLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="questionsDisplayLabel">
          QUESTIONS
        </h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <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" id="ques" data-bind="text: _data['question']"/>
              <div data-bind="foreach: {data: _data['answers'], as: 'answer'}">
                  <input type="radio" id="ans" data-bind="checked: $parent.selectedAnswer, attr:{name: $parent.optionGroupName, value: $data}" />
                  <span data-bind="text: answer"/>
              </div>


          </div>
        </div>
      </script>
         <button
            type="button"
            onclick="captureAnswers()"
            class="btn btn-secondary"
            data-dismiss="modal"
          >
            Next
          </button>
      </div>
    </div>
  </div>

<!-- Search result Display Modal -->
<div
  class="modal fade"
  id="searchResultDisplay"
  tabindex="-1"
  role="dialog"
  aria-labelledby="searchResultDisplayLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="searchResultDisplayLabel">
          Search Results
        </h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <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="result-box">
              <div class="bgtint"></div>
              <section class="businesscard">
                  <div class="flip">
                      <div class="front">
                          <div class="logo">
                              <img class="profile_image" width="50px" height="50px" data-bind="attr:{src: _data['profile_image']}"/>
                              <h2 class="user_name" data-bind="text: _data['username']"/>
                              <div class="introduction">COMPANY NAME GOES HERE!</div>
                              <div class="arrow"></div>
                          </div>
                      </div>
                      <div class="userinfo">
                          <ion-icon name="call">PHONE</ion-icon>
                          <div class="name">
                          </div>

                  </div>
              </section>
          </div>
        </div>
      </script>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>

`

Answer 1

是的，您不能在整个文档上两次调用applyBindings并期望不再使用它;-)但是此方法确实可以将元素作为其第二个参数，因此绑定仅应用于该元素。因此，您可以致电：

ko.applyBindings(dataModel, document.querySelector('#searchResultDisplay'));

并且：

ko.applyBindings(qnaDataModel, document.querySelector('#questionsDisplay'));

淘汰赛JS：如何使用“ with”或clearnNode处理淘汰赛JS的Multiplle绑定错误？

PS：我应该再说一遍，这是原型代码，因此，非常混乱。呼喊内森·费舍尔（https://stackoverflow.com/users/29467/nathan-fisher）！

1 个答案: