2

Kendo UI は使用をサポートdetailTemplateしていますが、Knockout-kendo バインディングを介して使用するにはどうすればよいですか?

jsfiddleコードはこちら

追加するだけで機能しませんが、表示されますが、詳細を開くと、あらゆる種類の例外が発生します (ASP.NET で予期されるオブジェクトrowTemplateとjsfiddle の破損)detailTemplaterowTemplate

4

3 に答える 3

1

これが私が思いついたものです（あなたの説明に基づいて）。すでに回避策を講じていることは承知していますが、ここに回答があるため、他の誰かがこれに遭遇した場合に備えて、この質問には少なくとも回答があります。

意見

<div data-bind="kendoGrid: { data: items, columns: columns, pageable: { pageSize: 3 }, scrollable: false, rowTemplate: 'rowTmpl', useKOTemplates: true }"> </div>

<script id="rowTmpl" type="text/html">
    <tr>
        <td data-bind="click: $parent.toggleShowDetails">+</td>
        <td data-bind="text: id"></td>
        <td data-bind="text: name"></td>
    </tr>
    <tr data-bind="visible: showDetails">
        <td colspan="3">
            <div data-bind="kendoGrid: { data: $data.details, scrollable: false }"></div>
        </td>
    </tr>
</script>

ビューモデル

var ViewModel = function () {
    var self = this;
    self.columns = [{ field: ' ' }, { field: 'id' }, { field: 'name'}];
    self.items = ko.observableArray([
        { id: "1", name: "apple", details: [{ id: "1", name: "subApple"}], showDetails: ko.observable(false) },
        { id: "2", name: "orange", details: [{ id: "2", name: "subOrange"}], showDetails: ko.observable(false) },
        { id: "3", name: "banana", details: [{ id: "3", name: "subBanana"}], showDetails: ko.observable(false) },
        { id: "4", name: "pineapple", details: [{ id: "4", name: "subPineapple"}], showDetails: ko.observable(false) },
        { id: "5", name: "grape", details: [{ id: "5", name: "subGrape"}], showDetails: ko.observable(false) },
        { id: "6", name: "mango", details: [{ id: "6", name: "subMango"}], showDetails: ko.observable(false) }
    ]);

    self.toggleShowDetails = function (data, event) {
        data.showDetails(!data.showDetails());
    };
};

ko.applyBindings(new ViewModel());

GitHub Issues コメントへのリンク: https://github.com/kendo-labs/knockout-kendo/issues/75#issuecomment-20004008

于 2013-06-25T20:22:44.757 に答える
0

行テンプレート自体に2行があり、1行が実際のデータで、もう1行が詳細行であるという別のアプローチに従いました。次に、アコーディオンを使用して、詳細行の表示/非表示をトリガーします。アコーディオンに使用されたブートストラップ...私にとってはうまく機能しますが、その方法は迂回しています。内部的には、これは彼らがそれを行う方法でもありますが、動的です。

于 2013-06-26T09:32:11.603 に答える
0

理想的には、これは kendo-knockout へのプル リクエストによって修正できます。その代わりに、次の方法でノックアウト データを取得して、剣道グリッドの詳細テンプレートに適切にバインドおよびレンダリングできます。

まず、detailTemplate を kendoGrid のテンプレートのリストに追加します。これを行うには、knockout-kendo.js を開き、「kendoGrid」を検索して、テンプレート名の配列に「detailTemplate」を追加します。変更後は次のようになります。

createBinding({
    name: "kendoGrid",
    defaultOption: DATA,
    watch: {
        data: function(value, options) {
            ko.kendo.setDataSource(this, value, options);
        }
    },
    templates: ["rowTemplate", "altRowTemplate", "detailTemplate"]
});

次に、detailTemplate をバインディング用に定義するだけでなく、viewmodel のメソッドにバインドする detailInit バインディングを追加します。バインディングの例を次に示します。

<div data-bind="kendoGrid: { data: items, detailTemplate: 'myKoTemplate',
    useKOTemplates: true, detailInit: myDetailInit } "> </div>

3 番目に、次の detailInit メソッドをビューモデルに追加して、バインディングがそれを見つけられるようにします。

this.myDetailInit = function(e) {
  // Manually fire the databound event on the grid to 
  // get the detail template to unmemoize properly
  e.sender.options.dataBound();
}

これが実際に機能するペンです: https://codepen.io/codethug/pen/MXoqZy

まだ読んでいますか？偉大な。では、ここで何が起こっているのか、そもそもなぜこれが壊れているのでしょうか?

最初の部分は簡単です。detailTemplate は kendoGrid のテンプレートとしてリストされていません。それを追加すると、剣道ノックアウトがテンプレートをレンダリングします。ただし、テンプレートはメモ化されますが、メモ化が解除されることはありません。

このコンテキストでのメモ化とは、剣道が kendo-knockout テンプレート レンダラーにテンプレートを要求し、kendo-knockout テンプレート レンダラーがそれをノックアウト テンプレート レンダラーに渡すときに、テンプレートがすぐにレンダリングされるのではなく、代わりに次の形式のプレースホルダーを意味します。次のような HTML コメント:<!--[ko_memo:123abc]-->レンダリングされたテンプレートの代わりに DOM に挿入されます。

Knockout-Kendo は、テンプレートがレンダリングされた後、dataBound イベントが kendo グリッド ウィジェットで発生することを前提としています。ノックアウト剣道はそのイベントにフックして、テンプレートのメモを解除します。rowTemplate のようなテンプレートを使用する場合、この仮定は当てはまります。ウィジェットをセットアップするとき、Kendo は render メソッドを呼び出し、次に kendo は dataBound メソッドを呼び出します。

ただし、detailTemplate では、この仮定は正しくありません。何かをクリックして剣道グリッド行の詳細を展開すると、renderTemplate メソッドが呼び出されますが、おそらくデータが変更されていないため、dataBound イベントは発生しません。

上記のコードに見られるように、dataBound イベントを手動で発生させることで、これを回避できます。実際にはデータは変更されていませんが、そのイベントが発生すると、剣道ノックアウトがトリガーされ、HTML コメントがメモ解除<!--[ko_memo:123abc]-->され、適切にレンダリングされたテンプレートに置き換えられます。

于 2018-06-13T21:57:21.933 に答える