多层无序列表无法在剑道模板

Question

我的剑道模板如下：

    <script id="instructionsTemplate" type="text/x-kendo-template">
        <ul style="list-style: square;">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4
                <ul style="list-style: circle;">
                    <li>Sub-Item 1</li>
                    <li>Sub-Item 2</li>
                    <li>Sub-Item 3
                        <ul style="list-style: disc;">
                            <li>Sub-Sub-Item 1</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Item 5</li>
        </ul>
    </script>

然而，这会产生以下图像：

如果我将该HTML粘贴到JsBin或其他东西，它工作正常......我想知道如何在一个kendo模板中使用多层无序列表。这是一个剑道对话框的模板，设置如下：

            $('#instructionsContainer').kendoDialog({
                visible: false,
                title: 'Instructions',
                closable: true,
                buttonLayout: 'normal',
                modal: false,
                content: kendo.template($('#instructionsTemplate').html()), //Tried both ways to see if it would make a difference. It didn't.
                //content: $('#instructionsTemplate').html(),
                actions: [{
                    text: 'Close',
                    primary: true,
                    action: function(e){

                    }
                }]
            });

非常感谢任何有关此问题的帮助。