Knockout JS: Как использовать "with" или clearnNode для устранения ошибки привязки Multiplle к knockout js? - PullRequest
Новая
       22

Knockout JS: Как использовать "with" или clearnNode для устранения ошибки привязки Multiplle к knockout js?

0 голосов
/ 23 декабря 2018

Я работаю над этим прототипом проекта.В настоящее время часть имеет дело с проблемой «Multipleinding» с нокаутом js.Я читал о различных методологиях, которые включают использование операторов with при обращении к модели данных в HTML.Я также читал, что использование clearNode может быть другим возможным решением при работе с различными моделями данных для рендеринга.Вот несколько фактов о моей текущей проблеме.

  • Я использую две разные модели данных, каждая из которых создается с использованием двух разных ответов / файлов JSON (локальных и API)
  • Первыймодальным для использования и рендеринга нокаутирующих привязок является «questionDisplay»
  • Я фиксирую вводимые данные для включения в отправку формы с помощью документов Google (не имеет значения, но объясняю некоторые из кодов в коде)
  • Во время отправкиформы информация отправляется в файл на диске Google, и кнопка «Далее» запускает модал «resultDisplay»
  • В этот момент возникает проблема, я получаю «Несколько привязок»

Я пытался использовать операторы «with» для «точного определения» точной модели при каждом выбивании шаблона, но я думаю, потому что они создаются только во время вызова функции, которая не будет доступна?Я не знаю, как начать рефакторинг кода, чтобы можно было использовать оператор «with».

Я также пробовал clearNode, включив имя id в корень, где нокаут объявляет имя длямодель данных, использование этого идентификатора в clearNode во время второго рендеринга KO ... идея заключалась в том, чтобы очистить его, а затем повторно использовать тот же узел.Хотя во фрагменте кода, который я предоставляю, я использую «шаблон» в чистом узле, потому что, когда я пробовал каждый узел, и так случилось, что это был последний, который я пробовал lol

, я также прочитал это во время '.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>

`

1 Ответ

0 голосов
/ 25 декабря 2018

Да, вы не можете дважды вызвать applyBindings для всего документа и рассчитывать на то, что с ним покончим ;-) Но этот метод действительно может принимать элемент в качестве второго аргумента, поэтому привязки применяются только к нему.Так что в вашем случае вы бы позвонили: 

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

И: 

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