Question

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

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

是否可以使用kendo ui tab strip的动态加载功能加载这些控件？

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

主页：

    <!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());

Answer 1

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

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

1 个答案: