koGrid 完全渲染后如何执行代码？答案

【问题标题】：How do I execute code after koGrid completely renders?koGrid 完全渲染后如何执行代码？
【发布时间】：2015-08-18 13:17:56
【问题描述】：

我正在与 kogrid 合作。我想根据该列中的数据将工具提示应用于特定列中的每个单元格。我的问题是准确找到放置工具提示 jquery 的时间/位置：

$('[data-toggle="tooltip"]').tooltip();

我使用的 colDef 是：

var myCol = {
    headerClass: 'koGridCentered',
    displayName: 'My Display',
    field: 'RootError',
    cellTemplate: '<div style="margin-top: 3px;" >' +
        '<div data-bind=" attr: { \'class\': \'kgCellText colt\' + $index() }">' +
            '<a href="#" data-toggle="tooltip" data-bind=" attr: { \'title\': $data.getProperty($parent) }, html: $data.getProperty($parent)"></a>' +
        '</div>' +
    '</div>',
    sortable: true, resizeable: true
}

数据是从 ajax 请求返回的。我尝试将 jquery 放入 axaxStop 块中：

$(document).ajaxStop(function() {
    $('[data-toggle="tooltip"]').tooltip();
}

但这是在 kogrid 渲染所有行之前调用的。

我已经使用 setTimeout 并简单地延迟 X 毫秒，然后应用工具提示，这很有效，但感觉就像一个 hack。

$(document).ajaxStop(function() {
    setTimeout(function() {
        $('[data-toggle="tooltip"]').tooltip();
    }, 10);
});

我也尝试在将数据推送到视图模型后调用工具提示。

for (var i = 1; i < data.length; ++i) {
    _this.SharedViewModel.MyCollection.push(ko.mapping.fromJS(data[i]));
}
$('[data-toggle="tooltip"]').tooltip();

这最终会将工具提示应用于前大约 7 行，而不是其余行。

我真正想要的是一种访问在网格完全渲染时触发的 kogrid 事件的方法。我已经搜索过这个并且没有提出任何东西，所以我在询问社区。p>

我注意到另一个小问题，即我的工具提示隐藏在其上方的 kogrid 单元格下。但这是次要的，我希望用 z-index 解决。

【问题讨论】：

您可能应该使用 Knockout，我的意思是您不应该使用 jQuery 在绑定处理程序之外处理 DOM。为您的工具提示制作自定义绑定处理程序。或者billpull.com/knockout-bootstrap 会帮助你。
@RoyJ - 感谢关于淘汰赛引导的提示！我一直在尝试找出自定义绑定处理程序的语法，并且 knockout-bootstrap 为我实现了它。你应该把你的评论变成一个答案。谢谢。

标签： javascript jquery knockout.js kogrid

【解决方案1】：

在 Knockout 中，您应该只通过绑定处理程序与 View 元素进行交互。 Knockout-Bootstrap 为 Bootstrap 小部件提供了许多绑定处理程序。

【讨论】：