0

KnockoutJSを広範囲に使用するかなり大きなASP.NETMVCWebアプリケーションがあります。何年にもわたって、アプリケーション用に多くのテンプレートを作成してきましたが、それらはすべて、名前付きスクリプトタグを使用してさまざまなWebページに存在します。さまざまな見方でそれらを管理することはほとんど耐えられなくなっています。これらのテンプレートを独自のhtmlファイルに統合して、管理しやすくする方法を見つけたいと思います。

この概念をサポートするライブラリがそこにあるかどうか知りたいですか？誰かが過去にこの問題に遭遇してそれを解決したと確信しているので、私は車輪の再発明をしたくありません。これが私が扱っていることの簡単な概要です...

基本的に、次のマークアップに似たコンテンツがたくさんあります。テンプレートが実際のコンテンツマークアップと同じページで定義されていることに注意してください。

[[ HOME/INDEX.CSHTML ]]

<h1>Customers</h1>
<div data-bind="template: {name: 'personTmpl', foreach: customers}"></div>

<h1>Products</h1>
<div data-bind="template: {name: 'productTmpl', foreach: products}"></div>

<script type="text/html" id="personTmpl">
  Name: <span data-bind="text: name" />
  Address: <span data-bind="text: address" />
</script>

<script type="text/html" id="productTmpl">
  Description: <span data-bind="text: description" />
  Category: <span data-bind="text: category" />
</script>

<script type="text/javascript">
  $(function(){
    var json = { 
      customers: [ { name: 'Joe', address: 'Denver, CO' } ],
      products: [ { name: 'Skis', category: 'Outdoors' } ]
    };
    var vm = new CustomViewModel(json);
    ko.applyBindings(vm);
  });
</script>

[[ END HOME/INDEX.CSHTML ]]

私がやりたいのは、personTmplとproductTmplを独自のhtmlファイルに保存し、必要に応じてそれらをビューにプルすることです。これにより、cshtmlファイルにコンテンツマークアップのみを含めることができます。さらに、どこからでもテンプレートを使用できるようになります（つまり、Customers \ Index、Products \ Show、Home \ Indexなど）。

各ページにカスタムjsが必要になると思いますが、これは、煩雑さを解消し、テンプレートをすべてのビューで利用できるようにするための少額の費用だと思います。各ページでいくつかのサーバー側タグを使用しているのを見ることができました（単なる例）：

@section templates {
  @Content.Template("Person.tmpl", Url)
  @Content.Template("Product.tmpl", Url)
}

<h1>Customers</h1>
<div data-bind="template: {name: 'personTmpl', foreach: customers}"></div>

<h1>Products</h1>
<div data-bind="template: {name: 'productTmpl', foreach: products}"></div>

<script type="text/javascript">
  $(function(){
    var json = @Html.Raw(Json.Encode(ViewBag.PageData)));
    var vm = new CustomViewModel(json);
    ko.applyBindings(vm);
  });
</script>

それらを独自のテンプレートに保存することで、古い方法を使用してツールチップやダイアログのコンテンツを動的にクエリすることもできます$.get('/tmpl/Person.tmpl', renderFunc)。

繰り返しになりますが、独自の実装を作成してもかまいませんが、すでに解決策があると確信しています。誰か？

前もって感謝します！！

4

1 に答える 1

2

ここで外部テンプレートエンジンを確認することをお勧めします：https ：//github.com/ifandelse/Knockout.js-External-Template-Engine

これにより、テンプレートを外部ファイルに配置し、通常nameパラメーターを使用する場合と同じようにバインディングでそれらを参照し、いくつかの規則または構成を使用して、テンプレートファイルを見つけるための正確なパスを決定できます。

外部テンプレートエンジンは非常に堅牢なソリューションです。私も最近、この目的のためにプラグインを使用require.jsしています。textこの回答の詳細：実行時にテンプレートをロードするknockout.js

それらをインラインでレンダリングしたい場合は、ヘルパー関数がファイルをロードして、非JSタイプのスクリプトタグでラップできると思います。

于 2012-09-27T04:48:11.297 に答える