問題タブ [embedly]

ひどいタイトル -- 申し訳ありません。

私は Embedly を使用していますが、理解するのがやや難しいことがわかりました。

私の目的は、API からタイトルと URL を抽出し、約 25 のタイトルをリストし、ボタンを押すと、embed.ly から埋め込まれた URL を表示することです。

私の現在の闘争は、ボタンを押して、押した1つのリンクのみを表示するのではなく、埋め込まれたURLを表示すると、25個のリンクすべてを一度に表示することを決定することです。イライラします。

これが私のコードです：

これはうまく機能し、embedly-card隠れていて、すべてが完璧です。私が苦労している部分は次のとおりです。

前に言ったように、埋め込む予定の 1 つの URL だけを切り替えるのではなく、クリックするdropDownと 25 個すべての URL が埋め込まれて途方に暮れます。どうすればこれを修正できますか? ありがとう。

埋め込みカードは素晴らしいです。しかし、多くの場合、読み込みが遅く、カードがレンダリングされる前に空白の領域が表示されます。embledy-card が表示される空白の領域にコンテンツが表示されないとユーザーに思わせる可能性があります。カードの読み込み中に、読み込み中のアニメーション GIF またはプレーン テキスト メッセージを表示するにはどうすればよいですか?

リンクが変更されたときに、サードパーティの jQuery ライブラリhttp://embed.lyをリアクティブに実行しようとしています。新しい Tracker.autorun を使用して、セッション変数 'droppedLink' が変更されたときに Template .rendered 関数で jquery を再実行するように指示しています。（データベースのリアクティブ変数も使用しましたが、同じ問題です）。

テンプレートヘルパーが不要なときに再実行されるのを防ぐための最良の方法に従ってみましたか?

このアプローチを試す必要があるかどうかわかりませんでしたか？Meteor 0.8 Blaze Jquery プラグインのレンダリングされた変更を更新する方法は、単純な autorun をウォッシュするだけで十分であるため、より複雑に見えました。

最初のレンダリングではすべて問題ありません (以下の 1 を参照)

U がリンクを置き換えると (# 2 と 3 を参照)、変数はリアクティブに更新されます。自動実行機能は実行されますが、Embedly rendred リンクの結果は正しくありません。ページに複数のネストされたリンクが挿入されているようです (以下のスクリーンショットを参照)。

1) .rendered 関数は次のとおりです。

2) リンクが正しくレンダリングされた最初の結果 (1 回目のパス) は次のとおりです。

2) リンク #2 に置き換えると、次のようになります。

レンダリングされたリンクは正しいですが、実際に埋め込まれたテキストと画像は正しくありません。

3）3番目のリンクに置き換えると、画像とレンダリングされたHTMLが次のようになります。

レンダリングされたリンクは正しいですが、実際に埋め込まれたテキストと画像は正しくありません。

#3 のレンダリングされた HTML は次のとおりです (Embedley が新しいリンクをネストし続ける方法はわかりません)。ページを更新すると、すべて正常に動作します (上記の #1 のように)。

console.log の例: JS エラーはありません。私からのデバッグのみです。あまりきれいではありませんが、自動実行が機能しており、DB で URL が正しく更新されていることがわかります。埋め込みが正しくレンダリングされていないようです。

```

```

更新と可能な回避策:

OK、私は何が起こっているのか理解できたと思います。それは、Embedly と Meteor の両方が DOM を操作しているためだと思います。

EMbedly が を削除してその コード<a class"something">に置き換えた後、2 回目に URL を更新したときのように、繰り返しが発生し<embed>ます。次回は、2 回目に変換された Embedly のリンクを抽出します。

これは、Meteor がページの更新なしで動作し、Embedly が DOM も変更することを予期していなかったように思われるためです。

<a class="something">したがって、これを補うために、Embedly を呼び出す前に、Embed を削除して、最初のパスのように を再挿入する必要があると思います。これを行う方法について何かヒントはありますか? つまり、Embedley を削除<div class="embed">して挿入する必要があります<a href=somelink></a>

これにより、Embedly が最初のパススルーとして機能できるようになります。

ps。このようにDOMを操作することが悪い悪いことなのかどうかはわかりません????

埋め込み API をテストしていますが、返されるものに問題があります。Javascript での私のコードは、URL を PHP に送信する次のとおりです。

ジャバスクリプト

PHP

したがって、PHP では、extract を使用して API を呼び出し、この URL を実行して、返された文字列に対して json_encodeを実行します。Javascript では、応答は JSON オブジェクトではなく、依然として文字列であるため、$.each関数は機能しません。

PHPからJSONを返すにはどうすればよいですか??

ありがとう。

コンポーネントが並列または非同期でロードされるようにコードを構造化する方法はありますか?

現在、私の構造は次のとおりです。

{listOfArticles} は記事の配列を作成し、各記事は Embedly Card API から読み込むように設定されているため、[ネットワーク] タブには、25 項目で最大 10 秒かかる時間差のある直線的な読み込みが表示されます。

ありがとう！

私はレールに非常に慣れておらず、組み込みで使用しようとしています。それを段階的に説明するチュートリアルはありますか? 私はこれに取り込もうとしているだけなので、それほど難しいことではないと確信しています。どんな助けでも大歓迎です！

ありがとう。