我正在开发这个项目原型。目前的部分是处理"多绑定"问题，使用敲除js。我已经阅读了不同的方法论，其中包括在引用HTML中的数据模型时使用"with"语句。我还读到，在处理要渲染的各种数据模型时，使用clearNode可能是另一种可能的解决方案。以下是关于我当前问题的一些事实。
- 我使用两个不同的数据模型，每个模型都是使用两种不同的JSON响应/文件(local和api)创建的
- 使用和呈现淘汰绑定的第一个模式是"questionDisplay">
- 我使用谷歌文档捕获要包含在表单提交中的输入(无关，但解释了代码中的一些cals)
- 在提交表单的过程中，信息会被发送到谷歌驱动器文件，"下一步"按钮会触发"resultDisplay"模式
- 此时出现问题，我得到了"多重绑定">
我曾尝试使用"with"语句来"固定"每个敲除模板的确切模型，但我在想，因为它们只在函数调用期间实例化，所以无法访问？我不知道该如何开始重构代码，以便能够使用"with"语句。
我也尝试过clearNode，通过在根目录中包含一个id名称，敲除声明数据模型的名称，在第二次KO渲染期间在clearNode中使用该id。。。这个想法是，它将清除它，然后重用同一个节点。虽然在我提供的代码片段中，我在clear节点中使用了"template"，因为我尝试了每个节点，所以碰巧这是我最后一次尝试lol
我还读到，在".applyBindings"期间，我可以包含元素名称来包含它吗？我尝试了几件事都没有成功。
附言：我应该再次声明，这是原型代码，呃，超级混乱。向内森·费舍尔大喊(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">×</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="one_answers" 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">×</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>
`
是的，您不能对整个文档调用applyBindings两次并期望它逃脱惩罚；-)但是这个方法确实可以将一个元素作为它的第二个参数，所以绑定只应用于它。所以在你的情况下，你会打电话给：
ko.applyBindings(dataModel, document.querySelector('#searchResultDisplay'));
和：
ko.applyBindings(qnaDataModel, document.querySelector('#questionsDisplay'));