使用 kendo UI tabstrip 的 dataContentUrl 时的 Knockout Js 数据绑定答案

【问题标题】：Knockout Js databinding when using the kendo UI tabstrip's dataContentUrl使用 kendo UI tabstrip 的 dataContentUrl 时的 Knockout Js 数据绑定
【发布时间】：2013-01-11 08:45:45
【问题描述】：

我正在尝试使用 Kendo UI 选项卡创建一组将插入到 html 页面上的部分 html 文档。每个部分 html 文档将包含将出现在每个选项卡中的控件。在这些部分 html 文档中，我尝试使用 Knockout JS 将控件绑定到视图模型对象。

当我加载页面时，控件似乎没有绑定到视图模型。当我将部分 html 文档中的标签复制到主页时，绑定工作。

是否可以使用 kendo ui 标签条的动态加载功能来加载这些控件？

这是我正在使用的一些示例代码：

主页：

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


    <script src="../Scripts/jquery-1.8.3.min.js"></script>
    <script src="../Scripts/knockout-2.2.0.js"></script>
    <script src="../Scripts/KendoUI/kendo.all.min.js"></script>
    <script src="../Scripts/ViewModels/EndorsementViewModel.js" defer="defer"></script>

    <link href="../Stylesheets/KendoUI/kendo.common.min.css" rel="stylesheet" />
    <link href="../Stylesheets/KendoUI/kendo.metro.min.css" rel="stylesheet" />
</head>
<body>

        <div>
            <div id="tabStrip">

            </div>
        </div>

</body>
</html>
<script>
    $(document).ready(function () {
        InitialKendoControls();

    });

    function InitialKendoControls() {
        InitialKendoTabStrip();
    }

    function InitialKendoTabStrip() {

        var tabstrip = $("#tabStrip").kendoTabStrip(
            {
                dataTextField: "text",
                dataContentField: "content",
                dataUrlField: "url",
                dataContentUrlField: "contentUrl",
                dataSource:
                [

                    {
                        text: "TestTab",
                        contentUrl: "../TestEndorsement/TestTab.html"
                    }
                ]
            }
            ).data("kendoTabStrip");

    }
</script>

部分 HTML：

<div>
    <span>Enter something</span><input data-bind="value: testValue" /><br />
    <button data-bind="click: testClick">Click Me</button>
</div>

查看模型：

function EndorsementViewModel()
{
    this.testValue = ko.observable("Test Value");

    this.testClick = function () { alert(this.testValue()); };
}
ko.applyBindings(new EndorsementViewModel());

【问题讨论】：

标签： knockout.js kendo-ui

【解决方案1】：

使用此 contentLoad 事件来执行应用您的绑定的逻辑（当前您使用文档读取事件）。如果该 Html 部分仍未加载，则绑定肯定无法正常工作。

【讨论】：