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 所建议的那样，但是您可以利用 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()

编辑：哦，另一个棘手的部分可能是如何将描述插入时间线数据。我只是对这个时间线的事情不够熟悉，无法了解它是如何完成的。

于 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

这是一个非常酷的解决方案，如果您愿意通过 Jquery，可以使用 AJAX。非常好的结果！

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

于 2010-06-30T22:50:45.333 回答
-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);

显然你只会输出免费的描述，或者唯一的描述；取决于所要求的。

编辑：修正了代码以正确地说 unset() 而不是 unshift()，印刷错误......

EDIT2：MXHR(Multipart XmlHttpRequest) 涉及制作所有描述的字符串，由分隔符分隔。

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

并请求那个长字符串。当它下降时，您可以读取流并拆分任何通过搜索完成的内容||。

于 2010-07-01T15:40:47.357 回答
-2

那将是服务器端问题。您无法更改前端的数据以使结果更小，因为您已经有了结果。

使用不同的调用或添加参数。

于 2010-06-22T18:09:16.737 回答