Question

当我在模态中使用弹出控件时，绑定不起作用。这是默认内容：

<form id="a" class="form-horizontal" data-bind="submit: SaveModal">
                                                            <div class="modal-body modal-content-form">
                                                                Default Content
                                                            </div>

                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                <input type="submit" class="btn btn-primary btn-modal-submit" value="Submit">
                                                            </div>
                                                            </form>

当我点击我的按钮时 <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal" data-title="Information" btn-block'=""><i class="fa fa-print"></i>Quote Proposal</button>我收到了新内容：

 <form id="a" class="form-horizontal" data-bind="submit: SaveModal">
                                                        <div class="modal-body modal-content-form">
                    <div class="panel-group">
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" href="#collapse001391ce-ebdb-4423-b525-40f97835fa53">Modal Controls</a>
                          </h4>
                        </div>
                        <div id="collapse001391ce-ebdb-4423-b525-40f97835fa53" class="panel-collapse collapse">
                          <div class="panel-body"><div class="row"><div class="col-sm-6">
                    <div class="form-group">
                            <label>Coverage Special</label>
                            <div class="input-group">
                                <span class="input-group-addon">$</span>
                                                <input id="CoverageSpecial" name="CoverageSpecial" data-bind="value: CoverageSpecial" type="number" step="any" class="form-control control-font">
                                                    <span class="input-group-addon">
                                                        <a tabindex="0" data-toggle="popover" data-trigger="focus" data-placement="left" title="TextBox Numeric Help : FAQs" data-content="  
  This control is an html textbox of type (TextNumeric). The values
  that are allowed are between a (Minimum) and a (Maximum)
  integer. The (Precision) allowed will dictate the amount of
  numbers after the decimal. It is (Required) and will
  render a label with the (Name) value. 
"><i class="fa fa-question-circle"></i></a>
                                                    </span>
                             </div>
                             <span class="help-block"></span>
                     </div>                                
                </div></div></div>
                          <div class="panel-footer"></div>
                        </div>
                      </div>
                    </div></div>

                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                            <input type="submit" class="btn btn-primary btn-modal-submit" value="Submit">
                                                        </div>
                                                        </form>

问题是如果我动态添加内容，淘汰不起作用。为什么呢？

Answer 1

Knockout没有收听对DOM所做的更改。它处理DOM树一次（在您调用applyBindings之后）并创建事件侦听器和订阅以确保在需要时更新内容。某些绑定（如with绑定）可以在需要时重新应用绑定到DOM的部分。

以下是强制淘汰重新应用绑定的一种非常基本的方法示例：

我们使用html绑定和保存部分HTML的observable交换DOM的部分
每次交换后，我们将绑定重新应用于具有html绑定的元素的内部：不能将绑定应用于元素两次;外部元素已绑定到我们的初始vm

此示例用于显示淘汰赛的工作原理，并不是最佳解决方案。手动管理多个绑定上下文可能会变得混乱。我建议创建一个为您执行此操作的自定义绑定。此外，此解决方案仅支持具有一个父元素的部分视图。

＆＃13;

var content1 = "<h1 data-bind='text: label1'>test</h1>";
var content2 = "<h2 data-bind='text: label2'>test</h2>";

var partialContent = ko.observable(null);

var reapplyBindingsToPartial = function() {
  var partialVM = {
    label1: "Heading 1",
    label2: "Heading 2"
  };

  var partialElement = document.querySelector(".js-partialView").firstChild;

  ko.applyBindings(partialVM, partialElement);
};

var swap = function() {
  if (partialContent() === content1) {
    partialContent(content2)
  } else {
    partialContent(content1);
  }

  // By now, the `html` binding was re-evaluated
  reapplyBindingsToPartial();

};

var vm = {
  partialContent: partialContent,
  swap: swap
};

ko.applyBindings(vm);
swap();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="js-partialView" data-bind="html: partialContent"></div>

<button data-bind="click: swap">
  swap
</button>

＆＃13;

bootstrap模态html内容敲除绑定不应用popover

1 个答案: