javascript - 如何在 Telerik TabStrip 控件中渲染部分 View ？

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>

我完全对如何在此“添加”选项卡中添加/呈现部分 View 感到困惑。

例如，我希望渲染 View “(Index, Home)”。

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

我发现的最接近的是:

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",
                    }
                    );
            },

我当前的设计是:

我希望在“新选项卡名称”选项卡下显示默认的“索引” View (按下追加按钮后)

有什么建议吗？

Answer 1

尝试使用 jQuery 的 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++;
        }
    }
},

缺点:

1. 这不是理想的解决方案，但我在加载异步内容时也遇到了 content 属性的问题。但我担心 kendo 可能会在幕后使用 jQuery load() 函数，因为它也使用 jQuery 的 ajax api；

2. 每次都会加载 View 内容。我不知道内容是否只能加载一次，然后重用，必须搜索它；

3. 如果 View 加载花费的时间比预期长，用户可以尝试查看选项卡并看到空白内容。加载图像可能会有帮助。