你可以在绑定期间在 Kendo UI Tabstrip 选项卡文本中添加 html 标记吗答案

【问题标题】：Can you add html markup in Kendo UI Tabstrip tab text during binding你可以在绑定期间在 Kendo UI Tabstrip 选项卡文本中添加 html 标记吗
【发布时间】：2016-05-03 01:07:53
【问题描述】：

尝试在我的标签中添加一个“x”，类似于 Chrome 浏览器标签中的“x”，以便能够单击以删除标签。只是仔细检查，但您似乎无法将 html 标记添加到您的选项卡（不是内容，而是选项卡本身），使用 BindTo 方法中的 MVC 包装器，如下所示：

@(Html.Kendo().TabStrip()
.Name("OrderDetailsTabs")
.HtmlAttributes(new { @class="orderDtlTabs"})
.BindTo(Model, (tab, tabModel) =>
    {
        tab.Text = "<a class='k-link'><span>Part: " + tabModel.WOHdr.OrderDetailId + 
                    "<button onclick='return deleteWorkOrder(" + tabModel.WOHdr.Id +")' class='delete k-button' title='Delete Work Order'></button>" +
                    "</span></a>"; // tab text

我知道我可以在标签加载后进行一些 DOM 操作，但只是看看我是否在绑定时缺少一些要做的事情。

【问题讨论】：

标签： kendo-ui kendo-asp.net-mvc

【解决方案1】：

好吧，我最终做了后期绑定 DOMnastics 以在加载后更新选项卡中的 html：

function addDeleteIconToTabs() {    
    var $tabItems = $('ul.k-tabstrip-items > li.k-item');
    $tabItems.each(function (index, tabLI) {
        var strTabId = $(tabLI).attr('aria-controls');
        var $tabContainerDiv = $('#' + strTabId);
        var intWorkOrderId = $tabContainerDiv.find('input.wohid').val();
        var strButtonHtml = "<button onclick='return deleteWorkOrder(this," + intWorkOrderId + ")' class='delete k-button' title='Delete Work Order'></button>";
        $(tabLI).append(strButtonHtml);
    });
}

【讨论】：