diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 7ec093ae..c540e724 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -1044,7 +1044,7 @@ function (option, path) {
content
. See section Templates for a detailed explanation.content
. See section Templates for a detailed explanation.- Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as argument, and outputs formatted HTML: + Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as the first argument, the item element as the second argument and the edited data as the third argument, and outputs formatted HTML:
var options = { - template: function (item) { + template: function (item, element, data) { var html = ... // generate HTML markup for this item return html; } @@ -1759,8 +1759,11 @@ var items = new vis.DataSet([ The HTML for an item can be created manually:var options = { - template: function (item) { - return '<h1>' + item.header + '</h1><p>' + item.description + '</p>'; + template: function (item, element, data) { + return '<h1>' + item.header + data.moving?' '+ data.start:'' + '</h1><p>' + item.description + '</p>'; + }, + onMoving: function (item, callback) { + item.moving = true; } };@@ -1795,7 +1798,7 @@ var template = Handlebars.compile(source); You can use a React component for the templates by rendering them to the templates' element directly:- template: function (item, element) { + template: function (item, element, data) { return ReactDOM.render(<b>{item.content}</b>, element); },@@ -1814,7 +1817,7 @@ var templates = { }; var options = { - template: function (item) { + template: function (item, element, data) { var template = templates[item.template]; // choose the right template return template(item); // execute the template }