kendo-ui - 以声明方式配置工具提示内容模板

Question

是否可以在使用数据声明性语法时配置 Kendo UI 工具提示的内容模板。

以下将使用单词template作为内容简单地创建一个工具提示。

<div data-role="tooltip" data-content="template">
   Lorum ipsum....
</div>

Answer 1

data-content 标记可以将 HTML 作为其属性，这意味着您可以避免使用单独的内容模板：

<script id="row-template" type="text/x-kendo-template">
    data-content="<div style='text-align: left; font-size: 11px; font-weight: bold;'><p>MVVM Property: #= mvvmPropertyName #</p></div>" 
</script>

希望这可以帮助。

Answer 2

你可以，但我不知道它是否真的可用，因为这样做，你应该在元素内部拥有它所引用的元素。

为了初始化它，你应该有一个像这样的 JavaScript：

<script type="text/javascript">
    $(document).ready(function () {
        kendo.init($("body"));
    });
</script>

然后你的 HTML 就很好了。

或者你可以有一个更复杂的 HTML，比如：

<div>
    <ol data-role="tooltip" data-content="message" data-filter="li>span">
        <li><span>item 1</span></li>
        <li><span>item 22</span></li>
        <li><span>item 333</span></li>
        <li><span>item 4444</span></li>
        <li><span>item 55555</span></li>
        <li><span>item 666666</span></li>
    </ol>
</div>

JSFiddle 中的示例：http: //jsfiddle.net/OnaBai/GerEN/

你也可以使用类似的东西：

<div>
    <ol data-role="tooltip" data-content="{ url : 'url.html'} " data-filter="li>span">
        <li><span>item 1</span></li>
        <li><span>item 22</span></li>
        <li><span>item 333</span></li>
        <li><span>item 4444</span></li>
        <li><span>item 55555</span></li>
        <li><span>item 666666</span></li>
    </ol>
</div>

您传递 acontent.url以检索实际内容的位置。