CODEWITHSUNDEEP
javascriptmeteorhighcharts
ilrein
ilrein

Reputation: 3923

Meteor: Reusing a Template With a Chart-Div

I'm using a single template show which doesn't really have any dynamic elements (yet):

<template name="show">
  <div class="row">
    <div id="container-pie"></div>  
  </div>
</template>

I have a sidebar, which pulls from my database and creates <a> tags.

My rendered callback has the code which draws a piegraph:

Template.show.rendered = function() {

  var datum = this.data.visitors; 

  var keys = Object.keys(datum); 

  newAndReturningPie(keys[0], keys[1], datum.new, datum.returning);  
}

(this data is being grabbed from iron:router).

Now here's where I need help (note the sidebar template for reference:)

<template name="sidebar">
  <div class="ui left demo vertical inverted labeled sidebar menu">
    <a class="item" href="{{pathFor 'root'}}">
      <i class="home icon"></i>Home
    </a>
    {{#if anyProperties}}
    {{#each this}}
    <a href="{{pathFor 'property.show'}}" class="item">
      {{name}}
    </a>
    {{/each}}
    {{else}}
    <a class="item">
      <i class="settings icon"></i>No properties
    </a>  
    {{/if}}
  </div> 
</template>

I'm using the same template for every object in the #each block. The problem is that the rendered callback captures the data for the first object, and switching context to another one doesn't actually reload or refresh the page.

If I was using just some HTML with {{objectProperty}}, then I know it would dynamically update. But I'm not using any Spacebars tags, just a single div which contains the graph.

What is a simple, elegant way to have the show template re-render/reload after clicking on an <a> tag in the sidebar?

UPDATE: Thanks to @tarmes

Here's my WORKING code:

Template.show.rendered = function() {

  var self = this;

  controller = Router.current();

  self.autorun(function(){
    var params = controller.getParams();

    Meteor.call('selectedProperty', params._id, function(err, res){
      if (!err) {
        var datum = res.visitors; 
        var keys = Object.keys(datum);     
        newAndReturningPie(keys[0], keys[1], datum.new, datum.returning);  
      }
    });
  });
}

All I did was add a Meteor method to query the DB for the object via ID.

Upvotes: 0

Views: 64

Answers (1)

tarmes
tarmes

Reputation: 15442

How about something like this:

Template.show.rendered = function() {

    self = this;
    controller = Router.current();
    self.autorun(function() {
      var params = controller.getParams(); // Reactive
      var datum = self.data.visitors; 
      var keys = Object.keys(datum); 
      newAndReturningPie(keys[0], keys[1], datum.new, datum.returning);  
    });
}

The autorun will rerun everytime the controller's parameters change (which I assume they will do if there's an _id etc. in the route), thus forcing an update.

Upvotes: 1

Related Questions