1

jQuery を使用したリクエストから受け取った JSON データの高速テンプレート レンダリングにノックアウトを使用しようとしています。

基本的に、事前にレンダリングされた HTML コンテンツを含むページをロードします (したがって、コンテンツを表示できます。ユーザーのブラウザーで JavaScript が無効になっている場合、すべての機能が動作しているふりをするのではなく、少なくとも基本的なコンテンツを表示します)。 ）。

次にユーザーがリンクをクリックすると、ページをリロードする代わりに、Ajax を使用して get-request を送信し、json を取得します。これが、古いコンテンツの代わりにレンダリングするデータです。

問題は非常に単純です。ノックアウト テンプレートを HTML マークアップに統合しましたが、呼び出し後にページが読み込まれるとko.applyBindings(myviewmodel)、事前にレンダリングされたコンテンツがすべて削除されてしまいます。これは、モデルにレンダリングする項目がないためです。

HTML リクエストに事前レンダリングされたデータを使用し、Ajax リクエストのみにノックアウト テンプレートを使用する方法はありますか?

4

2 に答える 2

3

visibleこれは、バインディングがテンプレートを表示/非表示にする方法を示すフィドルです。左側のリストから Knockout の選択を解除しても、[ようこそ] セクションは引き続き適切に表示されることに注意してください。ボタンをクリックして ajax リクエストを模倣し、テンプレート セクションが表示されるのを確認します。

表示バインディングは、コントロールを表示するかどうかを制御する標準の Knockout バインディングです。次のようになります。

<div data-bind="visible: welcome">

welcomeビューモデルの観察可能なプロパティはどこにありますか。

それでも不明な場合は、Knockout Interactive Tutorialsを強くお勧めします。このチュートリアルやその他の基本的な使用方法が説明されています。

于 2012-11-13T17:30:53.753 に答える
0

2 つの別々のことをしようとする代わりに、次のことができないでしょうか。

  1. コンテンツのデータを保持する監視可能なプロパティを使用してビューモデルを定義します。
  2. 最初のページの読み込み時に、事前にレンダリングされたデータ (おそらく隠しフィールドから取得されたもの) で監視可能なプロパティを初期化します。
  3. テンプレートを使用して、コンテンツ要素をオブザーバブルにバインドします。

次に、ajax リクエストを作成するときに、オブザーバブル プロパティのデータをリクエストから取得したデータで更新するだけで、UI が自動的に更新されます。

編集：

これは、概念を示す簡単なjsFiddle です(無効な JavaScript をシミュレートするために JavaScript をコメントアウトします)。

<input id="initialstate" type="hidden" value="4,5,6" />

<ul id="content" data-bind="template: { name: 'item-template', foreach:data }">
    <li>1</li>
    <li>2</li>
    <li>3</li>    
</ul>

<script type="text/html" id="item-template">
    <li data-bind="text: $data"></li>
</script>​

var viewModel = (function()
{
    var self = {};

    self.data = {};

    function init() {
        $('#content').empty(); 
        self.data = ko.observableArray($('#initialstate').val().split(','));
    }

    init();

    return self;
}());

ko.applyBindings(viewModel);
于 2012-11-13T17:24:50.000 に答える