4

Twitterの公式の例を使用しています。主な問題は、おそらくホーガン モンスターの使い方がわからないことです。JS 側:

$("#search_name").typeahead({
    name: 'name',
    remote: {
        url: '/entities/search_autocomplete.json?query=%QUERY',
        template: '<p><strong>{{id}}</strong> – {{name}}</p>',
        engine: Hogan
      }
});

サーバーはデータを JSON で返します。構造は次のとおりです。

[{\"id\":1234,\"name\":\"Blah blah...\",\"tokens\":[\"blah...\",\"blah\"]}]
4

1 に答える 1

7

私たちのプロジェクトの 1 つからこのコードを取得したところ、外部 JSON 配列の変換とカスタム オートコンプリート プロンプトでの出力に必要なマークアップを理解するのに役立つはずです。

$('input').typeahead({
    header: 'Your Events',
    template: [
    '<img class="ta-thumb" src="https://graph.facebook.com/{{id}}/picture?type=square" />',
    '<p class="ta-h1">{{name}}</p>',
    '<p class="ta-p">{{start_time}}</p>'
    ].join(''),
    limit: 3,
    remote: {
        url: 'https://graph.facebook.com/me/events?access_token=' + access_token,
        filter: function(parsedResponse) {
            var dataset = [];
            for(i = 0; i < parsedResponse.data.length; i++) {
                dataset.push({
                    name: parsedResponse.data[i].name,
                    start_time: parsedResponse.data[i].start_time,
                    id: parsedResponse.data[i].id,
                    value: parsedResponse.data[i].name,
                    tokens: [parsedResponse.data[i].id, parsedResponse.data[i].name]
                });
            }
            return dataset;
        },
    },
    engine: Hogan
});

Hogan.jsテンプレート コンパイラをダウンロードして、マークアップに含める必要があります (たとえば、外部スクリプトとして使用したり、Require.jsなどのモジュール ローダーを介して使用したりします)。これにより、Hogan変数が設定されます。

また、配列の変換をよりよく理解するために、そのグラフ API 呼び出しを確認することをお勧めします。

うまくいけば、これは役に立ちます:)

于 2013-05-02T21:43:01.990 に答える