当我在 document.ready() 中没有模型时如何绑定模型答案

【问题标题】：How to bind a model when I don't have it at document.ready()当我在 document.ready() 中没有模型时如何绑定模型
【发布时间】：2019-07-18 18:53:41
【问题描述】：

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

如果我重新应用绑定，我会收到“无法将绑定多次应用于同一元素”错误。我试过 'cleanNode() 不会清除数组项。我不能将应用绑定（）应用到点击事件之外，因为我不知道模型，因为它是通过 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 个项目。

【问题讨论】：

看来你已经在这里问过了：stackoverflow.com/questions/56854058/…
尝试重写您的代码以首先使用click 和visible 绑定。混合过多的 jQuery 和淘汰赛通常不是要走的路。
是的@Bludev，我修改了我的真实世界代码，我不能只发布相同的问题以重新出现。我把它分解成一个更简单的例子来尝试解决这个问题。看来我把它分解得太多了并删除了模板，因此同样的问题又回来了。

标签： javascript jquery knockout.js

【解决方案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>

【讨论】：