3

一部のクライアント側 JS で使用される配列にドキュメントのリストを返したいと思います。私の apostrophe-pages モジュールには、この apos.docs.find 呼び出しがあり、これは機能しており、取得する必要があるドキュメントを返します。このドキュメントの配列を取得したので、データをクライアント側の JS に公開する必要があります。

ドキュメントを読むと、おそらくこれを行うためにピースが推奨されているように見えますが、ピースをウィジェットに入れ、次にウィジェットをページに入れる必要があるようです。

モジュールの分離に関するベストプラクティスの懸念は理解していますが、このデータをクライアントでできるだけ簡単かつ簡単に使用できるようにしたいと考えています (少し時間がかかります)。

この autoCompleteData 配列をフロント エンドに公開するシンプルで簡単な方法はありますか?クライアント コードで以下のようなことを行うことができますか?

(ご協力ありがとうございます。ここ数日でアポストロフィに関する質問がいくつかありましたが、バックエンド オブジェクトをフロント エンドに接続するためのギャップを埋めるのに役立つ最後のピースの 1 つだと思います。)

\lib\modules\apostrophe-pages\views\pages\home.html

 <script>
   var page = apos.page;
   $('#displayDocs').text(page.autoCompleteData);
 </script>

\lib\modules\apostrophe-pages\index.js

 module.exports = {
  types: [
     { name: 'default', label: 'Default Page' },
     { name: 'apostrophe-blog-page', label: 'Blog Index' },
  ],
  autoCompleteData: [],
  construct: function(self, options) {

    self.pageBeforeSend = function(req, callback) {

       let criteria = [
         {"type": "apostrophe-blog"}, 
         {"published": true}
       ];
       criteria = { $and: criteria };

       self.apos.docs.find(req, criteria).sort({ title: 1 }).toObject(function(err, collection){     
       self.autoCompleteData = collection;
    });

    return callback(null);
  }
 }
}
4

1 に答える 1

4

ご存知のように、私は P'unk Avenue で Apostrophe チームを率いています。

問題の解決に非常に近づいています。Nunjucks テンプレートreq.dataのオブジェクトの一部として表示されるように、元に戻したデータを添付するだけです。data

ただし、非同期プログラミングにも注意が必要です。現在、ドキュメントを取得するために非同期リクエストを発行しています。その間、すぐにコールバックを呼び出しています。そうではありません。コールバックの要点は、実際にデータを取得し、テンプレートでレンダリングする準備が整うまで呼び出さないことです。

関連するコードの修正は次のとおりです。

self.apos.docs.find(req, criteria).sort(
  { title: 1 }
).toArray(function(err, autocomplete) {
  if (err) {
    return callback(err);
  }
  req.data.autocomplete = autocomplete;   
  return callback(null);
});  

私が行った変更:

  • toArrayではなく、と呼びますtoObject。ここで複数のオブジェクトに関心があります。
  • 先に進む前にエラーをチェックします。ある場合は、それをコールバックに渡して返します。
  • 配列を割り当ててreq.data.autocomplete、nunjucks ページ テンプレートとそれらが拡張するレイアウトがそれを認識できるようにします。
  • その後、コールバックを呼び出してnull成功を示し、戻ります。

returnコールバックを呼び出すときは常にキーワードを使用していることに注意してください。常に戻ってくる (ABR)。そうでない場合、コードは予期しない方法で実行され続けます。

このコードは、部分に領域や結合などがある場合に多くの情報をフェッチするため、パフォーマンス上の問題が発生する可能性があります。プロジェクションを追加することを検討する必要があります。

self.apos.docs.find(req, criteria, { title: 1, slug: 1 })...

この目的のために必要なその他のプロパティをプロジェクションのプロパティに追加します。(これは標準の MongoDB プロジェクションです。詳細を知りたい場合は、それらについて読んでください。)

独自のpageBeforeSend製法を継承する「スーパーパターン」を採用

apostrophe-pagesモジュールには既にメソッドpageBeforeSendがあり、重要な作業を行っています。上書きするだけでは、その作業のメリットが失われます。

1 つの解決策は、別のモジュールをまったく拡張しない新しいモジュールをプロジェクトに作成し、pageBeforeSendそこにメソッドを導入することです。pageBeforeSendはアポストロフィのcallAllメカニズムによって呼び出されるため、モジュールを持つすべてのモジュールに対して呼び出されます。

別の解決策は、「スーパー パターン」に従って、元のバージョンのメソッドも確実に呼び出されるようにすることです。

var superPageBeforeSend = self.pageBeforeSend;
self.pageBeforeSend = function(req, callback) {
  // Do our things here, then...
  return superPageBeforeSend(req, callback);
};

ブラウザでJavaScriptにデータを渡す

次の質問に答えるには (:

ページ テンプレートで、次のように記述できるようになりました。

<script>
  var autocomplete = {{ data.autocomplete | json }};
</script>

jsonnunjucks フィルターは、配列を JSON に変換します。この JSON は、このようなスクリプト タグに出力しても安全であることが保証されています。つまり、ブラウザー側の JavaScript で適切な配列を作成することになります。

find適切なコンテンツ タイプのメソッドを使用する

適切なタイプのコンテンツを取得したり、公開されているかどうかを確認したりするためだけに、独自の基準オブジェクトを作成する手間を省くことができます。代わりに、次のように書くことを検討してください。

self.apos.modules['apostrophe-blog'].find(req, {}).sort()...

すべてのピースモジュールには、そのタイプにカスタマイズされたカーソルを返す独自のfindメソッドがあるため、公開日に達したものや、あなたが考えていない可能性のあるものに固執するためのより良い仕事をします.

これが役に立てば幸いです!

于 2016-10-13T19:53:55.693 に答える