Bootstrap 弹出框模板丢失了敲除绑定

Question

我正在尝试制作一个具有 html 形式的弹出窗口和一个类型为 "submit" 的按钮。此弹出窗口也绑定到 knockout.js.

当我点击弹出窗口上的按钮时，它不会触发 KO 功能，而是发出一个标准的 post 请求。

如果我将表单移到弹出窗口之外，它会正常工作。

如何在弹出窗口中创建 html 表单并使用提交按钮触发我的模型的功能？

<a href="#" id="createTaskPopover" data-toggle="popover" data-placement="right" title="Create Task">Click me!!!</a>

<div id="createTaskPopoverContent" class="hide">
    <form data-bind="submit: AddTask">
        <input type="hidden" id="FeatureId" name="FeatureId" value="" />
        <span>Name</span>
        <input type="text" id="Name" name="Name" style="width:100%;" /><br />

        <br />
        <button id="btnCreateNewTask" type="submit" class="btn btn-info">Create</button>
        <br />
    </form>
</div>

$('#createTaskPopover').popover({
        container: 'body',
        html: 'true',
        content: function () {
            return $("#createTaskPopoverContent").html();
        }
    });

function VM() {
    var self = this;
    self.AddTask = function (formElement) {
        console.log(formElement);
    }
}
var projectVM = new VM();
ko.applyBindings(projectVM);

Answer 1

未触发函数的原因是 HTML 弹出窗口使用的是在运行时注入的，并且已经应用了 Knockout 绑定：

content: function () {
           return $("#createTaskPopoverContent").html();
         }

选项 A：弹出窗口显示后进行 Knockout 绑定

$('#createTaskPopover').on('shown.bs.popover', function () {
  var projectVM = new VM();
  ko.applyBindings(projectVM);
})

选项 B：内联 HTML 并简化为 $('#createTaskPopover').popover()

data-content="raw HTML here" data-html="true"

Answer 2

它不起作用的原因是因为您正在用 .html() 调用复制 html，此时敲除绑定丢失。你实际上可以给 bootstrap 元素直接使用，并结合显示的事件删除 hide class，它按你想要的方式工作：

$('#createTaskPopover').popover({
    container: 'body',
    html: 'true',
    content: $("#createTaskPopoverContent") //return element directly
}).on('shown.bs.popover', function() {
    $('#createTaskPopoverContent').removeClass('hide'); //remove hide when popover shown
});

Here's an updated fiddle。但是请注意，当弹出窗口打开时 "unhides" 内容会出现轻微闪烁。

这可以通过仅将内部 form（或者您可以将其包装在另一个 div 中）传递给弹出窗口来进一步改进，然后您甚至不需要处理显示的事件，弹出窗口显示后您看不到内容 "appearing"：

$('#createTaskPopover').popover({
    container: 'body',
    html: 'true',
    content: $("#createTaskPopoverContent > form") //select the form directly
});

Further updated fiddle.

Bootstrap 弹出框模板丢失了敲除绑定

Bootstrap popover template loses knockout bindings

twitter-bootstrap

knockout.js

popover