Twitter bootstrap 使用html内容模板为Twitter引导popover定制Knockoutjs绑定

我正在使用Twitter引导弹出窗口。popover要求您为popover的内容设置属性data content是的，您必须包含数据html:true。我使用knockoutjsforeach:binding来显示文档列表。但是，每个文档都有一个popover项，需要显示从该文档的$data构建的html内容

我希望可以在自定义bindingHandler中使用ko.renderTemplate来呈现模板，并将呈现的HTML推送到数据内容属性中，但ko.renderTemplate似乎只想操作一个元素

有没有办法做到这一点。下面是我目前正在使用的代码，但我不喜欢它的脆弱性

工作HTML

以下是我想做的事情：

HTML

---

第二组代码使其无法工作，您遇到了什么问题？另外，如果您创建了一个JSFIDLE，您可能会更快地得到答案。问题是ko.renderTemplate需要一个元素，并且希望替换或将html注入该元素。我也不想要。我需要html，以便将html注入元素的属性中。

            <div data-bind="foreach: govDocuments" >
            <div data-bind="css: { 'selected': Linked }" class="well well-small" style="padding:5px;width:300px;margin: 2px 0px;">
                    <b data-bind="text: DocumentTypeName"></b>&nbsp;&nbsp;
                    <!-- This needs to remain before info-sign icon so that data is bound before popover binding -->
                    <div style="display: none;  padding: 5px; margin: 2px " class="well well-small">
                        <span data-bind="text: DocumentNumber"></span><br />
                        <span data-bind="text: IssueDate ? moment(IssueDate).format('DD MMM YYYY') : ''"></span> - 
                        <span data-bind="text: ExpirationDate ? moment(ExpirationDate).format('DD MMM YYYY') : ''"></span><br />
                        <span data-bindg="text: IssuingAuthority"></span>
                    </div>
                    <span  style="float:right">
                        <a href="#" class="icon icon-edit" title="Details" data-bind="visible: !$root.selectedImmigration()"></a>
                        <a href="#" class="icon icon-trash" title="Delete" data-bind="visible: !$root.selectedImmigration()"></a>
                        <a href="#" class="icon icon-info-sign" data-toggle="popover" data-bind="popover: DocumentTypeName"></a>
                        <input type="checkbox" data-bind="checked: Linked, visible: $root.selectedImmigration()"/>
                    </span>
                    <br />
                    <span data-bind="text: DocumentClass"></span>
                    <span data-bind="text: DocumentTypeCountryName"></span>
            </div>
        </div>

    $(document).ready(function () {
    ko.bindingHandlers.popover = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var html = $(element).parent().siblings("div:hidden").html();
            $(element).attr("data-content", html);
            $(element).attr("data-title", valueAccessor() || "");
        }
    };
    ko.applyBindings(gov.documentViewModel, $("#government")[0]);
    gov.documentViewModel.activate();
});

<script type="text/html" id="popover-template">
                    <div style="display: none;  padding: 5px; margin: 2px " class="well well-small">
                        <span data-bind="text: DocumentNumber"></span><br />
                        <span data-bind="text: IssueDate ? moment(IssueDate).format('DD MMM YYYY') : ''"></span> - 
                        <span data-bind="text: ExpirationDate ? moment(ExpirationDate).format('DD MMM YYYY') : ''"></span><br />
                        <span data-bindg="text: IssuingAuthority"></span>
                    </div>
</script>
            <div data-bind="foreach: govDocuments" >
            <div data-bind="css: { 'selected': Linked }" class="well well-small" style="padding:5px;width:300px;margin: 2px 0px;">
                    <b data-bind="text: DocumentTypeName"></b>&nbsp;&nbsp;
                    <span  style="float:right">
                        <a href="#" class="icon icon-edit" title="Details" data-bind="visible: !$root.selectedImmigration()"></a>
                        <a href="#" class="icon icon-trash" title="Delete" data-bind="visible: !$root.selectedImmigration()"></a>
                        <a href="#" class="icon icon-info-sign" data-toggle="popover" data-bind="popover: DocumentTypeName"></a>
                        <input type="checkbox" data-bind="checked: Linked, visible: $root.selectedImmigration()"/>
                    </span>
                    <br />
                    <span data-bind="text: DocumentClass"></span>
                    <span data-bind="text: DocumentTypeCountryName"></span>
            </div>
        </div>

    $(document).ready(function () {
    ko.bindingHandlers.popover = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var html = ko.renderTemplate("popover-template", viewModel() || {}, {}, element, 'replaceNode');
            $(element).attr("data-content", html);
            $(element).attr("data-title", valueAccessor() || "");
        }
    };
    ko.applyBindings(gov.documentViewModel, $("#government")[0]);
    gov.documentViewModel.activate();
});