是否可以在简明的时间线中通过ajax动态加载内容(而不是预先加载

Question

我使用the javascript simile timeline有一个非常大的描述字段的时间线项目。我不想让我的初始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调用让它按需加载。

有没有办法在初始加载期间不向下发送desription字段，以及当有人单击某个时间线项目时，让它在此时通过ajax加载描述

我认为这是一个常见的功能，但我找不到它

Answer 1

我认为你需要做的就像@dacracot建议的那样，但是你可以利用Timeline文档中描述的一些处理程序，特别是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
}

至少有一部分我还没有回答，那就是如何判断哪个事件被点击了，但是你大概可以从evt.getID()中找出来

编辑：哦，另一个棘手的部分可能是如何将描述插入到时间线数据中。我只是对Timeline这件事还不够熟悉，无法理解它是如何做到的。

Answer 2

所以我想知道你能不能写一个叫做描述的脚本。

{
 '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>

我承认我没有尝试过，但这可能是一个开始。

Answer 3

我还必须在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

希望这能有所帮助。