2

こんにちは、これは .net の JSON Web サービスで MustacheJS を使用する最初の試みです

現在、私はこの基本的な例を設定して間違っていることを見つけることができないようです:

私のWebサービスは次の文字列を返しています:

[
  {
    "ShortDescription":"BOX",
    "Description":"BOXING",
    "Id":1
  },
  {
    "ShortDescription":"EPL",
    "Description":"ENGLISH PREMIER LEAGUE",
    "Id":2
  }
]

この Web サイトで構文を検証しました: http://json.parser.online.fr/

ここに私が使用しているHTMLコードがあります:

google.load("jquery", "1");
google.setOnLoadCallback(function () {
    $(document).ready(
        function () {

            $.ajax({
                url: "../data.asmx/geteagues",
                type: "POST",
                dataType: "json",
                data: "",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var template = "<h1>{{ShortDescription}} {{Description}}</h1>";
                    var html = Mustache.render(template, data);
                    $('#sampleArea').html(html);
                    alert(html);
                }
            })

        }
    )
});

私は JavaScript があまり得意ではないので、JS コード全体を投稿しています。基本的には、Google から常に最新の JQuery バージョンをロードしてから、WS 呼び出しを実行したいと考えています。

これまでの問題は、次の行にブレークポイントを配置したときです。

 var html = Mustache.render(template, data);

テンプレートが正常に設定されていることがわかります。データも同様で、上に投稿した値と同じ値ですが、.render 関数は次の値を返しています。

データが気に入らなかったようです。

これまで見てきたインライン データの例はすべて、次のような構造になっています。

{
  "repo": [
    { "name": "resque" },
    { "name": "hub" },
    { "name": "rip" },
  ]
}

そして、次のように定義されたテンプレート:

{{#repo}}
  <b>{{name}}</b>
{{/repo}}

しかし、私のデータとの唯一の違いは、「レポ」のような「親」がないことです

サーバー側では、JSON.net と呼ばれる .net ライブラリを使用しており、コレクションがどのようにシリアル化されているかのドキュメントで:

james.newtonking.com/projects/json/help/html/SerializingCollections.htm

最終結果には、親ノードの名前が含まれていません。これは、Mustache テンプレートの定義から欠落しています。

[
  {
    "Name": "Product 1",
    "ExpiryDate": "2000-12-29T00:00Z",
    "Price": 99.95,
    "Sizes": null
  },
  {
    "Name": "Product 2",
    "ExpiryDate": "2009-07-31T00:00Z",
    "Price": 12.50,
    "Sizes": null
  }
]

これは私が見逃しているものですか？テンプレートを反復できるように、データから「レポ」親ノードを取得しますか?

お時間をいただきありがとうございます。

-ed

4

3 に答える 3

3

この質問の @stealth ごとにMustache.js: json 経由で受信したリストを反復処理します。

    {{ #. }}
        <b>{{Name}}</b>
    {{ /. }}

@stealth の回答との唯一の違いは、「/」ではなく「#」であることに注意してください。

于 2013-04-02T16:37:17.083 に答える
1

行 data = { 'roles': data }; が最も重要です。Web APIまたはpagemethodsやWebサービスなどの他のデータソースによって返されたデータにキーを添付します

$.ajax({
        dataType: "json",
        url: '/api/TestApi/GetAllRole',
        success: function (data) {          
            data = { 'roles': data }; // formatting the data to support the mustache    format  
            var html = Mustache.to_html($('#RoleTemplate').html(), data);
            $('#tblRole').append(html);

        }
    });

MustacheJs に関する私の記事のいくつかは、ここで見つけることができます

MUSTACHEJS を使用した基本グリッドのインライン フィルター http://www.techguides.in/add-inline-filter-to-basic-grid-using-mustache/

マスター詳細グリッド オン デマンド データの読み込み: Mustache.JS の使用 http://www.techguides.in/master-details-grid-on-demand-data-loading-using-mustache-js/

MustacheJs を使用したグリッドの並べ替え http://www.techguides.in/enable-sorting-in-a-grid-bound-using-mustache-js/

于 2013-09-02T15:23:31.077 に答える
0

短い答え：はい

長い答え：セキュリティ上の理由から[1]、とにかくJSONをオブジェクトでラップする必要があります。Mustacheまたはその他のライブラリが配列にアクセスできるようにするには、イテレータのベースとなる親キーが少なくとも1つ必要です。
サンプルの「repo」キーは、口ひげに「repoキー内にある配列を繰り返し処理する」ように指示する必要があるヘルパーです。そうしないと、出力する場所をテンプレートに指示する方法がありません。

[1]これは、JSON応答をオブジェクトでラップする必要がある理由について見つけることができる多くのリソースの1つにすぎませんhttp://incompleteness.me/blog/2007/03/05/json-is-not-as-safe -as-people-think-it-is /

于 2012-08-06T03:18:57.173 に答える