创建新模型时，无法清除淘汰模型绑定 [英] Knockout model bindings not clearing when new model created

问题描述

我正在引导程序模版中创建一个淘汰赛模型.最初，模型是正确创建并绑定到模板的，但是当关闭并重​​新打开模态时，我最终会在模板中包含多个项目.该模型似乎没有通过多个modal.show()调用重新实例化.我以同样的问题将我的真实示例分解为以下示例.

I am creating a Knockout model within a bootstrap modal. Initially the model is created and bound to the template correctly, however when closing and reopening the modal I end up with multiple items in the template. The model doesn't seem to be re-instantiated with multiple modal.show() calls. I have broken down my real world example to that below with the same issues.

由于我的真实世界代码，我调用ko.cleanNode()来清除绑定，因为如果没有它，我会得到您不能多次将绑定应用于同一元素".错误.但这似乎并没有清除节点.我在CodePen上有一个示例:- https://codepen.io/asteropesystems/pen/LKeyoN

Because of my real world code I call ko.cleanNode() to clear the bindings as without it I get the 'You cannot apply bindings multiple times to the same element.' error. But this does not seem to clean the nodes. I have an example on CodePen:- https://codepen.io/asteropesystems/pen/LKeyoN

HTML

<div id="openModal" class="btn btn-primary">Open modal</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
   <div class="modal-content">
    <div class="modal-header">
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
     </button>
    </div>
   <div class="modal-body">
    <div data-bind="foreach: persons">
     <div data-bind="text: $data"> </div>
    </div>
   </div>
   <div class="modal-footer">
    <div class="btn btn-secondary" id="cancel">Cancel</div>
   </div>
  </div>
 </div>
</div>

JavaScript

JavaScript

var TestModel = function () {
  var self = this;
  self.persons = ko.observableArray();

  for (var m = 0; m < 5; m++) {
    self.persons.push('TEST ' + m);
  }
  return this;
};

$('#openModal').click(function() {

  var model = new TestModel();

  ko.cleanNode(document.getElementById('exampleModal'));
  ko.applyBindings(model, document.getElementById('exampleModal'));

  $('#exampleModal').modal('show');

});

$('#cancel').click(function () {
  $('#exampleModal').modal('hide');
});

我希望重置模型，并在结果中显示正确的项目数.

I am expecting the model to be reset and the correct number of items showing in the result.

推荐答案

我认为您应该在关闭模式对话框后保持绑定，只更改人"的内容.

I think you should keep the binding after closing the modal dialog, changing only the content of "persons".

var TestModel = function ()  {
  let self = this;
  self.persons = ko.observableArray([]);
};

var model = new TestModel();
ko.applyBindings(model, document.getElementById('exampleModal'));

$('#openModal').click(function() {
  model.persons([]);
  for (var m = 0; m < 5; m++) {
    model.persons.push('TEST ' + m);
  }
  $('#exampleModal').modal('show');
});

$('#cancel').click(function () {
  $('#exampleModal').modal('hide');
});

这篇关于创建新模型时，无法清除淘汰模型绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！