From 439aa79a687e680d97f36260d11d356439a1b8fb Mon Sep 17 00:00:00 2001
From: yotamberk <yotamberk@gmail.com>
Date: Mon, 17 Oct 2016 14:06:15 +0300
Subject: [PATCH] Expose the item/group element in option.template and
 option.groupTemplate  (#2153)

* Hide vertically hidden ranged items in groups that are not visible
* Add element to templates options
* Fix comment typo
* Add documentation for react mounting
---
 docs/timeline/index.html            | 15 +++++++++++++--
 lib/timeline/component/Group.js     |  2 +-
 lib/timeline/component/item/Item.js |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 70f747be..f32ac2a2 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -648,7 +648,7 @@ function (option, path) {
       <td>groupTemplate</td>
       <td>function</td>
       <td>none</td>
-      <td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as argument, and must return HTML code as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+      <td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as the first argument and the group element as the second, and must return HTML code as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
     </tr>
 
     <tr>
@@ -978,7 +978,7 @@ function (option, path) {
       <td>template</td>
       <td>function</td>
       <td>none</td>
-      <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+      <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as the first argument and the item element as the second, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
     </tr>
 
     <tr class='toggle collapsible' onclick="toggleTable('optionTable','timeAxis', this);">
@@ -1630,6 +1630,17 @@ var template = Handlebars.compile(source);
 };
 </pre>
 
+<h3>React templates</h3>
+
+You can use a React component for the templates by rendering them to the templates' element directly:
+
+<pre class="prettyprint lang-js">
+  template: function (item, element) {
+    return ReactDOM.render(&lt;b&gt;{item.content}&lt;/b&gt;, element);
+  },
+</pre>
+
+
   <h3>Multiple templates</h3>
 
   In order to support multiple templates, the template handler can be extended to switch between different templates, depending on a specific item property:
diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index 3d0d0e82..3302c67e 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -88,7 +88,7 @@ Group.prototype.setData = function(data) {
   // update contents
   var content;
   if (this.itemSet.options && this.itemSet.options.groupTemplate) {
-    content = this.itemSet.options.groupTemplate(data);
+    content = this.itemSet.options.groupTemplate(data, this.dom.inner);
   }
   else {
     content = data && data.content;
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index ea5c7cbb..743e5944 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -190,7 +190,7 @@ Item.prototype._updateContents = function (element) {
   var content;
   if (this.options.template) {
     var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
-    content = this.options.template(itemData);
+    content = this.options.template(itemData, element);
   }
   else {
     content = this.data.content;