一个按钮的剑道工具提示答案

【问题标题】：Kendo tooltip for a button一个按钮的剑道工具提示
【发布时间】：2014-06-18 13:04:29
【问题描述】：

以下代码显示没有剑道样式的标题：

<button data-role="button" data-bind="click: add" data-position="top" class="k-button" title="Add">
        <i class="fa fa-file-o fa-2x"></i>
    </button>

虽然此代码显示带有剑道样式但没有标注的标题：

<button data-role="tooltip" data-bind="click: add" data-position="top" class="k-button" title="Add">
        <i class="fa fa-file-o fa-2x"></i>
    </button>

如何以 MVVM 方式显示具有剑道样式和标注的按钮的剑道工具提示？

【问题讨论】：

有什么区别？他们看起来都一样
不同之处在于 data-role="button" 将触发点击事件但不显示剑道风格的工具提示。它将显示浏览器工具提示。而 data-role=tooltip" 将显示剑道风格的工具提示。不幸的是，它不会触发点击事件，也不会显示标注。

标签： mvvm kendo-ui kendo-tooltip

【解决方案1】：

由于剑道使用的是jQuery，所以可以使用jquery的点击功能。

设置按钮的 ID

 <button id="testbutton" data-role="tooltip" data-bind="click: add" data-position="top" class="k-button" title="Add">
            <i class="fa fa-file-o fa-2x"></i>
        </button>

添加点击事件处理程序

$('#testbutton').click(function(){
    alert('xx');
});

【讨论】：

是的，我试过了。有没有其他选择？我正在使用 requirjs，但我不喜欢在我的视图模型中进行 domready 中继。我的视图模型要直截了当。

【解决方案2】：

这里的问题完全相同。

我找到的唯一解决方案是：

<button id="addButton" data-role="button" data-bind="click: add" data-position="top" class="k-button" title="Add">
        <i class="fa fa-file-o fa-2x"></i>
</button>

在你绑定的 js 中：

$("#addButton").kendoTooltip({         
});

我找不到纯 MVVM 解决方案，因为您不能拥有超过 1 个数据角色属性，也不能拥有

data-role="button tooltip"

希望有帮助

【讨论】：