Question

我正在使用Twitter Bootstrap popovers。弹出窗口要求您为popover的内容设置属性数据内容（是的，您必须包含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();
});

使用html内容模板为Twitter Bootstrap popover定制Knockoutjs绑定

0 个答案: