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

@@ -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:

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;

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;