0

如果这已在其他地方得到回答，我很抱歉。我真的做了很多搜索，但没有什么能完全回答我的问题。另外，我有点新，所以在回答时请记住这一点......

我有一个来自http://timeline.verite.co/的时间线， 这是一个很棒的时间线，可以通过 JSON 文件进行更新。但是，我希望能够通过我网站上的用户表单更新 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

您的管理区域应该将更改的文件发送到服务器，我想您已经实现了该部分。

您的时间线页面（客户端）需要做的是获悉数据发生了变化。这基本上可以通过两种方式完成：

  • 定期轮询服务器以询问是否有更改。这很容易做到：创建一个计时器，例如每 60 秒再次从服务器请求数据，将其与已有的数据进行比较，如果发生更改，则重新绘制时间线。这种方法在服务器端不需要什么特别的。更有效的方法不是一次又一次地检索完整的文件，而是实现一个像“getLastUpdatedTimestamp”这样的服务器端方法，它返回文件最后更新的时间。然后客户端可以比较这个时间戳而不是整个文件，如果发生更改，则检索新文件。

  • 通过推送通知自动获得服务器的通知。这将是最好的解决方案，但还不是很容易实现（需要在客户端和服务器之间保持一个套接字打开，这仅受现代浏览器支持）。

于 2012-07-25T07:27:32.333 回答