Question

我正在尝试在jQuery按钮单击事件上绑定模型，这将打开一个模式窗口，其中显示了一组数组项。第一次运行该集合是正确的，但是在随后的打开中，该集合每次都会变大。它似乎并没有创建新的数组。

如果我重新应用绑定，则会收到“无法多次将绑定应用于同一元素”错误。我尝试过'cleanNode（），它不会清除数组项。我无法将clickApplys（）应用于click事件之外，因为我不知道该模型，因为该模型是通过在同一click事件上通过API服务检索的。

HTML

<div class="btn" id="click1">CLICK ME 1</div>

<div id="app_test1" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body">
        <div data-bind="foreach: list">
          <div data-bind="text: name"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-bind="click: cancel"><i class="fas fa-times" aria-hidden="true"></i> Cancel</button>
      </div>
    </div>
  </div>
</div>

JavaScript

$(function() {

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

    var data = [ {name: "Bob"}, {name: "Joe"}, {name: "John"} ];
    var viewModel = runModalTest(data);

    var el = document.getElementById('app_test1');

    ko.cleanNode(el);
    ko.applyBindings(viewModel, el);

    $('#app_test1').show();

  });

  function runModalTest(data) {
    var viewModel = {
      list: ko.observableArray(data),
      cancel: function () {
        $('#app_test1').hide();
      }
    };

    return viewModel;
  };

});

还可在CodePen上使用：-https://codepen.io/asteropesystems/pen/ymBXPa

$(function() {

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

    var data = [{
      name: "Bob"
    }, {
      name: "Joe"
    }, {
      name: "John"
    }];
    var viewModel = runModalTest(data);

    var el = document.getElementById('app_test1');

    ko.cleanNode(el);
    ko.applyBindings(viewModel, el);

    $('#app_test1').show();

  });

  function runModalTest(data) {
    var viewModel = {
      list: ko.observableArray(data),
      cancel: function() {
        $('#app_test1').hide();
      }
    };

    return viewModel;
  };

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn" id="click1">CLICK ME 1</div>

<div id="app_test1" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body">
        <div data-bind="foreach: list">
          <div data-bind="text: name"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-bind="click: cancel"><i class="fas fa-times" aria-hidden="true"></i> Cancel</button>
      </div>
    </div>
  </div>
</div>

每次打开模式时，我都要求它在数组中显示3个项目。

Answer 1

我设法使用this question解决了这个问题。基本上是通过使用模板代替原始HTML。

HTML

<div class="btn" id="click1">CLICK ME 1</div>

<div id="app_test1" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body">
        <div data-bind="template: { name: 'list-template', foreach: list }">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-bind="click: cancel"><i class="fas fa-times" aria-hidden="true"></i> Cancel</button>
      </div>
    </div>
  </div>
</div>
<script type="text/html" id="list-template">
  <div data-bind="text: name"></div>
</script>

当我在document.ready（）中没有模型时如何绑定模型

1 个答案: