5

私はjavascript 直喩タイムラインを使用しています。非常に大きな説明フィールドを持つタイムライン アイテムがあります。誰かがタイムライン項目をクリックしたときにのみ必要になるため、これをすべて使用して最初の json ペイロード データを肥大化させたくありません。

たとえば、この JSON の結果では次のようになります。

 {
 'dateTimeFormat': 'iso8601',
 'wikiURL': "http://simile.mit.edu/shelf/",
 'wikiSection': "Simile Cubism Timeline",

 'events' : [

    {'start': '1880',
    'title': 'Test 1a: only start date, no durationEvent',
    'description': 'This is a really loooooooooooooooooooooooong field',
    'image': 'http://images.allposters.com/images/AWI/NR096_b.jpg',
    'link': 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm'
    },

JSON から説明フィールドをまとめて削除 (または null を送信) し、別の ajax 呼び出しを介してオンデマンドでロードしたいと考えています。

とにかく、初期ロード中に説明フィールドを送信せず、誰かがタイムライン項目をクリックすると、その時点で ajax を介して説明をロードする必要がありますか?

これは一般的な機能だと思っていましたが、見つかりませんでした

4

6 に答える 6

2

あなたがする必要があるのは@dacracotが提案したようなものだと思いますが、タイムラインのドキュメントで説明されているハンドラーの一部、特にonClick handlerを利用できます。だから私があなたがすることを想像しているのはこれです：

//save off the default bubble function
var defaultShowBubble = Timeline.OriginalEventPainter.prototype._showBubble;

//overwrite it with your version that retrieves the description first
Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
  //make AJAX call here
  //have the callback fill your description field in the JSON and then call
  //the defaultShowBubble function
}

私が答えていない部分が少なくとも 1 つあります。それは、どのイベントがクリックされたかを把握する方法ですが、おそらくevt.getID()

編集:ああ、他のトリッキーな部分は、説明をタイムライン データに挿入する方法かもしれません。私は、このタイムラインがどのように行われるかを確認するのに十分なほど詳しくありません。

于 2010-07-16T16:45:32.353 に答える
1

だから、説明を呼び出​​すスクリプトを配置できるかどうか疑問に思います。

{
 'dateTimeFormat': 'iso8601',
 'wikiURL': "http://simile.mit.edu/shelf/",
 'wikiSection': "Simile Cubism Timeline",

 'events' : [

    {'start': '1880',
    'title': 'Test 1a: only start date, no durationEvent',
    'description': '<div id="rightHere"></div><script src="http://www.allposters.com/js/ajax.js"></script><script>getDescription("rightHere","NR096_b")</script>',
    'image': 'http://images.allposters.com/images/AWI/NR096_b.jpg',
    'link': 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm'
    },

少し分解して...

これは、JavaScriptのinnerHTMLを更新する場所です。

<div id="rightHere"></div>

これは、ajax呼び出しを行い、innerHTMLを更新するJavaScriptです。

<script src="http://www.allposters.com/js/ajax.js"></script>

最後に、これは適切な説明を適切な場所に取得するためのjavascript呼び出しです。

<script>getDescription("rightHere","NR096_b")</script>

私はこれを試したことがないことを認めますが、それは始まりかもしれません。

于 2010-06-30T19:49:11.933 に答える
0

また、asp.net MVC アプリケーションでそのようなことをしなければなりませんでした。私の場合、ページの読み込み時にそれを行う必要がありました。一部の条件\イベントでも実行できます。

私がしたことは、ページがロードされたときに部分ビューコントローラーに対して GET リクエストを行ったことです。そこから「PartialViewResult」を返しました。次に、UI でレンダリングする必要がある場所に配置しました。コントローラーでは、部分ビューをレンダリングするさまざまな方法があることに注意してください。コントローラーで UI Html をハードコーディングしませんでした。それは良い習慣ではありません。私はUIをレンダリングしました：

return PartialView("~/UserControls/Search.ascx", model);

基本的にあなたのビューエンジンはUI Htmlをレンダリングしています. :) 私の実装をご覧になりたい場合は、こちらのリンクをご覧ください: http://www.realestatebazaar.com.bd/buy/property/search

それが役立つことを願っています。

于 2010-07-26T13:52:37.170 に答える
-1

PHP を使用していて、サンプルの JSON が文字列になっていると仮定しています。

//I have the JSON string in $json::
$jsonArr = json_decode($json);
$jsonOput = array();

//move descriptions into a numbered array, (E.G. a JSON [])
foreach($jsonArr['events'] as $a=>$b) {
    $jsonOput[] = $b['description'];
    unset($jsonArr['events'][$a]['description'];
}

//Output the original JSON, without the descriptions
echo json_encode($jsonArr);
//Output the JSON of just the descriptions
echo json_encode($jsonOput);

明らかに、説明を無料で出力するか、説明のみを出力します。依頼内容によります。

編集: unshift() の代わりに unset() を正しく言うようにコードを修正しました。タイプミス...

EDIT2: MXHR(Multipart XmlHttpRequest) には、区切り記号で区切られたすべての説明の文字列を作成することが含まれます。

$finalOput = implode('||',$jsonOput);

そして、その長い文字列をリクエストします。それが下に来るにつれて、ストリームを読んで、||.

于 2010-07-01T15:40:47.357 に答える
-1

これは非常に優れたソリューションであり、Jquery を使用したい場合は AJAX を使用できます。とても良い結果です！

http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/

于 2010-06-30T22:50:45.333 に答える
-2

それはサーバー側の問題でしょう。すでに結果が得られているため、結果を小さくするためにフロントエンドのデータを変更することはできません。

別の呼び出しを使用するか、パラメーターを追加してください。

于 2010-06-22T18:09:16.737 に答える