0

ノックアウト剣道パッケージのおかげで、ノックアウト付きの剣道グリッドを使用しています。

グリッドとグリッドの構成を次のように定義しています。

<div id="gridResult" data-bind="kendoGrid: gridOptions"> </div>

テンプレート:

<script id="rowTmpl" type="text/html" >
    <tr >
        <td data-bind="text: PermitNumber"></td>
        <td data-bind="text: WorkTypeDescription"></td>
        ....
    </tr>
</script>

ビューモデルのコード:

// search result
this.SearchResult = ko.observableArray();
this.gridOptions = {
            data: self.SearchResult,
            pageable: { pageSize: 20 },
            useKOTemplates: true,
            rowTemplate: "rowTmpl"
}

データソースにデータを入力すると、すべてがうまく機能しています。

ただし、アプリ全体のさまざまなテンプレートでうまく機能する Knockout.js-External-Template-Engine を使用していますが、剣道グリッド行に使用されるテンプレートでは機能しません。

私は2つの方法でセットアップしようとしました：

  1. gridOptions.rowTemplate で外部テンプレートに名前を付けます (ただし、データ オブジェクトへの参照を外部テンプレート エンジンに渡す方法がわからないため、これをあきらめます)

  2. gridOptions.rowTemplate が html ファイル内の「疑似テンプレート」を指すようにし、その内部で外部テンプレートへの参照を定義し、以下のように $data をデータ コンテキストとして渡します。

<script id="rowTmpl" type="text/html" >
    <!-- ko template: {name: 'gridRow',  data: $data}-->
    <!-- /ko -->
</script>

外部テンプレート gridRow.tmpl.html は次のとおりです。

<tr >
        <td data-bind="text: PermitNumber"></td>
        <td data-bind="text: WorkTypeDescription"></td>
        ....
</tr>

ただし、機能しません。ページの読み込み中にネットワーク リクエストを確認すると、剣道行テンプレートを読み込むリクエストがありません。

それを機能させる方法はありますか？

EDIT 行テンプレートを外部ファイルに移動すると、ページ内でrowTemplate inlineを使用しても問題なく動作する場合でも、次のjavascriptエラーが発生することに気付きました。

ReferenceError: gridOptions が定義されていません

4

1 に答える 1

0

実際、私はそれを使用する方法を理解しています。解決策を以下に示します。

  • テンプレートの共通の場所の下にあるテンプレート パスを使用するように infuser を構成し、拡張子なしのページ名に一致するサブフォルダーで次のようにします。
infuser.defaults.templateSuffix = ".tmpl.html";
infuser.defaults.templateUrlRoot = "/templates/modules";
infuser.defaults.templateUrl = infuser.defaults.templateUrlRoot + '/' +
    window.location.pathname.replace(/\.[^\.\/]+$/, "").substr(1);
  • gridOptions の rowTemplate を、別の要素のページに存在しない ID に設定します

this.gridOptions = {rowTemplate = 'myTemplate' }

  • テンプレートが検索されるフォルダーにファイルを作成し、rowTemplate で設定されたテンプレート名として名前を付けます。そこには、... タグを囲むことなく、実際のテンプレート マークアップを定義するだけです。私の場合、テンプレート ファイルは /template/ です。モジュール/mypage1/myTemplate.tmpl.html

  • 非常に重要です!!! ページに ID ='myTemplate' の要素がないことを確認してください。その場合、テンプレート エンジンは、実際のテンプレート ファイルをロードする代わりに、その要素をテンプレートと見なし、それを使用しようとします。

それでおしまい。

最初に直面した問題は、テンプレート名と同じ名前の別の要素がページにあったことです。これが、テンプレート エンジンが実際のテンプレート ファイルを取得しなかった理由です。

于 2013-12-15T20:02:45.887 に答える