2

基本的に、テンプレートはScrollViewを使用してレンダリングされませんが、kendo.render(template, response)動作します-しかし、content = template(response)これにはスタイルが表示されません-以下のコメントを参照してください

テンプレートを剣道スタイルで表示するにはどうすればよいですか?

ところで、API 呼び出しからの応答は JSON です。

{"event_id":"5","stamp":"2013-01-24 06:00:00","type":"イベントの種類","loc":"場所","status":"1" }

<!-- eventDetail view -------------------------------------------------------------------------------------------------->
    <div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
                <a data-align="right" data-role="button" class="nav-button" href="#view-myEvents">Back</a>
            </div>
        </header>
        <div id="eventDetail" data-role="page"></div>
    </div>

    <script id="eventDetail-template" type="text/x-kendo-template">
        --><form id="addEventForm"><p>
        <input name="event_type" id="event_type" data-min="true" type="text" value="#= type #" />
        </p>
        <p>         
        <input name="event_loc" id="event_loc" data-min="true" type="text" value="#= loc #" />
        </p>
        <p>         
        <input name="event_date_time" id="event_date_time" data-min="true" type="datetime" value="#= stamp#" />
        </p>
        <p>
        Share this
        <input data-role="switch" id="event_share" data-min="true" checked="checked" value="1"/></p>
        <p>
        <input type="button" id="eventCancelButton" style="width:30%" data-role="button" data-min="true" value="Cancel" />
        <input type="submit" id="eventDoneButton" style="width:30%" data-role="button"  data-min="true" value="Done" />
        </p></form><!--
    </script>

    <script>

        //eventDetail engine
        function getEventDetailData(e) {
            $.ajax({
                url: 'http://localhost/mpt/website/api/event_details.php?',
                type: "GET",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: { userID: 2, eventID: e.view.params.id },


                success: function(response) {

                    console.log(response);

                    var template = kendo.template($("#eventDetail-template").html()),
                    content = template(response);//works but no kendo css
                    //content = kendo.render(template, response);not working

                    $("#eventDetail")
                    .kendoMobileScrollView()
                    .data("kendoMobileScrollView")
                    .content("<!--" + content + "-->");
                }
            });
        }</script>
4

1 に答える 1

3

ウィジェット クラス ( などkm-button) は、ウィジェットが初期化されるまで追加されません。

template()および関数はrender()、データが置き換えられた文字列としてテンプレートを返します (#=foo# を foo プロパティの値に置き換えます) が、すべてのウィジェットを初期化するわけではありません。実際、ウィジェットを初期化したい場合は、DOM 要素ではなく、テキスト文字列を返すだけです。通常、ウィジェットの初期化は、テンプレートを使用している親ウィジェットによって行われます。

render()2番目の引数は配列であると想定されているため、あなたの場合は機能しません。配列内の項目ごとに指定されたテンプレート関数を 1 回呼び出し、結果を連結するだけです。代わりに行った場合：

var content = kendo.render(template, [response]); // wrap response in an array

と同じテキスト文字列を返しますtemplate(response)。同じテンプレートを一度に多くのアイテムに適用する方法を提供するだけです。

通常、ウィジェットを作成するとき、あなたのケースで.kendoMobileScrollView()は、その要素の HTML コンテンツもウィジェットに変換することが期待されますが、ScrollView ウィジェットはこれを行わないようです。その意図は、他のウィジェットではなく、静的コンテンツのページを表示することだけだったのではないかと思います。

ドキュメントに記載されていない Kendo メソッドがありkendo.mobile.init(contents);、テンプレート文字列をウィジェットに変換するために使用できる可能性があります。jsFiddle で試してみると、エラーが発生しましたが、次のようなものを試すことができます。

var content = template(response); // apply response to template
var contentElements = $(content); // turn the string into DOM elements
kendo.mobile.init(contentElements); // turn elements into widgets (this throws error for me)
$("#eventDetail").html(contentElements); // add contents to the desired element
$("#eventDetail").kendoMobileScrollView(); // create the scroll view

また、テンプレートの端からぶら下がっている end と begin のコメント ビットは何ですか? なぜそれらが必要なのかわかりません。それらを取り除いた方が良いかもしれません。

ScrollView ウィジェットは、一連の<div>要素を子として受け取ることになっています。次に、コントロールを左右にスワイプすると、それらの間でページが移動します。<div>一連のs をどこにも追加していません。

于 2013-01-16T12:47:18.223 に答える