2

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

1 に答える 1

1

このcontentLoadイベントを使用して、バインディングを適用するロジックを実行します (現在、ドキュメントの読み取りイベントを使用しています)。その Html 部分がまだロードされていない場合、バインディングは確実に機能しません。

于 2013-01-11T00:45:45.487 に答える