Question

此处与Telerik的文档混淆。

我有一个TabStrip控件，采取并略微改编自Telerik的例子：

<button id="actuallyClose" class="removeItem k-button" style="visibility:hidden">X</button>
<div id="tabstrip">
    <ul>
        <li id="open" class="k-button">Add +</li>
    </ul>

    <div>
        Please Complete The following:
        <br />
        Tab name: <input id="newTabName" type="text" />
        <button class="appendItem k-button">Append</button>
    </div>

</div>

Javascript ：

        $(document).ready(function () {
            var getItem = function (target) {
                var itemIndex = target[0].value;

                return tabStrip.tabGroup.children("li").eq(itemIndex);
            },
            select = function (e) {
                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                    tabStrip.select(getItem($("#tabIndex")));
            },
            append = function (e) {
                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                    tabStrip.append({
                        encoded:false,
                        text: $("#newTabName").val() + '<button onclick="; actuallyClose.click();">X</button>',
                        encoded:false,
                        content: "<div><br/></div>", /*would like to render a view here!!!*/
                        spriteCssClass: "tabCloseBtn",
                    }

                    );
            },

          ...

            $(".removeItem").click(function (e) {
                var tab = tabStrip.select(),
                otherTab = tab.next();
                otherTab = otherTab.length ? otherTab : tab.prev();

                tabStrip.remove(tab);
                tabStrip.select(otherTab);
            });

         ...

            $(".appendItem").click(append);
            $("#appendText").keypress(append);

          ...
        });

        var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");



        $("#tabstrip").kendoTabStrip({
            animation: {
                // fade-out current tab over 1000 milliseconds
                close: {
                    duration: 1000,
                    effects: "fadeOut"
                },
                // fade-in new tab over 500 milliseconds
                open: {
                    duration: 500,
                    height: "100%",
                    width: "96%",
                    effects: "fadeIn"
                }
            }
        });

    </script>

我完全对于如何在此添加的内容中添加/呈现部分视图感到困惑＆＃39;标签。

我希望呈现View＆＃39;（Index，Home）＆＃39;例如。

但是，我无法在任何地方找到答案:(

我最近发现的是：

LoadContentFrom(@Html.Action("Index", "MyController")),

如here所述 - 但我仍然遇到了OP的问题。

我想我需要在这个脚本中声明一些内容：

         append = function (e) {
                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                    tabStrip.append({
                        encoded:false,
                        text: $("#newTabName").val() + '<button onclick="; actuallyClose.click();">X</button>',
                        encoded:false,
                        content: "<div><br/></div>", /*would like to render a view here!!!*/
                        spriteCssClass: "tabCloseBtn",
                    }
                    );
            },

我目前的设计是：

this

我希望有一个默认的＆＃39;索引＆＃39;视图显示在“新标签名称”下。选项卡（按下一个附加按钮）

有什么建议吗？

Answer 1

尝试使用jQuery＆＃39; load()渲染您的部分内容：

var tabCounter = 1; // A global variable or anything like it

append = function (e) {
    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
    {
        tabStrip.append({
            encoded:false,
            text: $("#newTabName").val() + '<button onclick="; actuallyClose.click();">X</button>',
            encoded:false,
            content: "<div id='tab" + tabCounter + "'></div>", 
            spriteCssClass: "tabCloseBtn",
        });

        $("#tab" + tabCounter).load("url/goes/here", function()
        {
            // Load Complete
            tabCounter++;
        }
    }
},

否定点：

这不是理想的解决方案，但我已经遇到了content属性加载asyn内容的问题。但我担心剑道可能会在幕后使用jQuery load（）函数，因为它也使用jQuery的ajax api;
每次都会加载视图内容。我不知道内容是否只能加载一次，然后重复使用，必须搜索它;
如果视图加载花费的时间比预期的多，则用户可以尝试查看选项卡并面对空白内容。加载图片可能会有所帮助。

如何在Telerik TabStrip控件中渲染局部视图？

1 个答案: