1

我正在使用 Twitter Bootstrap 弹出框。弹出框要求您为弹出框的内容设置属性 data-content（是的，您必须包含 data-html: true）。我正在使用 Knockoutjs foreach: binding 来显示文档列表。但是，每个文档都会有一个弹出项，需要显示从该文档的 $data 构建的 html 内容。

我希望我可以在自定义 bindingHandler 中使用 ko.renderTemplate() 来呈现模板并将呈现的 HTML 推送到 data-content 属性中，但 ko.renderTemplate() 似乎只想操纵一个元素。

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

工作 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>

工作 Javascript

    $(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();
});

以下是我想做的想法：

HTML

<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>

Javascript

    $(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();
});
4

0 回答 0