0

これがどこかで答えられていたらすみません。私は本当にたくさん検索しましたが、私の質問に完全に答えるものはありませんでした。また、私は少し新しいので、答えるときはそのことを覚えておいてください...

http://timeline.verite.co/から使用しているタイムラインが あります。これは優れたタイムラインであり、JSON ファイルを介して更新できます。ただし、Web サイトのユーザー フォームから JSON ファイルを更新できるようにしたいと考えています。

例: 管理ページがあります...フォーム領域のコードは次のとおりです:

        <div id = "contentarea">    
        <div id="tab1">
            <form id="randomevents" method="POST" action="#">
                <ul>
                    <li><label for="event_title">Event Title</label>
                        <input id="event_title" type="text"></li>
                    <li><label for="event_details">Event Details</label>
                        <textarea rows="15" cols="44"></textarea></li>
                    <li><label for="date">Date: ex "mm/dd/yyyy"</label>
                        <input id="date" type="text"></li>
                    <div id="submitevent"><button type="submit" class="button">Submit</button></div>

                </ul>
            </form>

タイムラインは別のページにあります...コードは次のとおりです。

        <div id="timeline-embed"></div>
    <script type="text/javascript">
        var timeline_config = {
        width:              '100%',
        height:             '300px',
        source:             'data.json',
        start_at_end:       false,                          
        start_at_slide:     '1',                            
        hash_bookmark:      true,                           
        font:               'Bevan-PotanoSans',             
        maptype:            'watercolor',                   
        css:                'js/maintimeline/compiled/css/timeline.css',    
        js:                 'js/maintimeline/compiled/js/timeline-min.js'   
    }

</script>

JSON ファイルは次のようになります (部分的)。

{
"timeline":
{
    "headline":"Helen Queen",
    "type":"default",
    "text":"A beautiful mother, wife, woman",
    "date": [
        {
            "startDate":"1924,1,26",
            "headline":"A little girl is born into a big family!",
            "text":"<p>Helen is born on January 11, 1924. She is the fifth girl and the eight overall child!</p>",
            "asset":
            {
                "media":"images/fortimeline/helen.jpg",
                "credit":"",
                "caption":""
            }
        },

私が望むのは、ユーザーが管理ページのフォームにコンテンツを入力し、JSON ファイルを更新 (および追加) することです。これにより、タイムライン ページが自動的に更新されます。私が言ったように、私は答えを探しましたが、まったく一致するものは何もなかったか、答えがわかりにくかったです!

ありがとう！

4

1 に答える 1

1

管理エリアは変更されたファイルをサーバーに送信する必要があります。その部分が実装されていると思います。

タイムライン ページ (クライアント) が行う必要があるのは、データに変更があることを通知することです。これは、基本的に次の 2 つの方法で実行できます。

  • サーバーを定期的にポーリングして、変更があるかどうかを尋ねます。これは非常に簡単です。たとえば、60 秒ごとにサーバーからデータを再度要求するタイマーを作成し、データと比較し、変更された場合はタイムラインを再描画します。この方法では、サーバー側で特別なことは何も必要ありません。より効率的な方法は、完全なファイルを何度も取得するのではなく、ファイルが最後に更新された時刻を返す「getLastUpdatedTimestamp」などのサーバー側メソッドを実装することです。クライアントは、ファイル全体ではなくこのタイムスタンプを比較し、変更されている場合は新しいファイルを取得できます。

  • プッシュ通知を介してサーバーから自動的に通知されます。これは最も優れたソリューションですが、実装はまだ簡単ではありません (クライアントとサーバーの間でソケットを開いたままにしておく必要があり、これは最新のブラウザーでのみサポートされています)。

于 2012-07-25T07:27:32.333 に答える