Manipulate a div when using npm package for client side

help
1

I want to use a npm timeline package (http://visjs.org/docs/timeline/) for in client side. I am trying to manipulate the div which is a container of the timeline elements. An error is occurred (Cannot read property ‘$’ of undefine). Anybody can tell me which is the best way I am able to handle this?

The html is

<template name="timeline">
    <div id="visualization"></div>
</template>

The js is

import vis from 'vis';

Template.timeline.rendered (function (template) {

    var container = template.$("#visualization");

    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ]);

    // Configuration for the Timeline
    var options = {};

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);

    console.dir(timeline);

})
2

A couple of issues straight up:

  • Template.timeline.rendered should be Template.timeline.onRendered
  • onRendered doesn’t pass in any parameters, which is why your template var is undefined. Access the current template using this or Template.instance()
  • it looks like vis.js wants the element, not the jquery of it. Use template.find('#visualization') instead of $

ie. Combining the above would give you this:

import vis from 'vis';

Template.timeline.onRendered(function () { // <<<-- changed
    var template = this; // <<<-- added
    var container = template.find("#visualization"); // <<<-- changed

    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ]);

    // Configuration for the Timeline
    var options = {};

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);

    console.dir(timeline);

})

Hope that works and good luck with your project!

3 Likes
3

You are brilliant! It works and you help me understand more about jQuery object and DOM. Thank you so much @coagmano !!