Question

我使用单个模板 show ，它还没有任何动态元素（

）

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

我有一个侧边栏，它从我的数据库中提取并创建<a>个标记。

我渲染的回调函数有一个绘制饼图的代码：

Template.show.rendered = function() {

  var datum = this.data.visitors; 

  var keys = Object.keys(datum); 

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

（这些数据是从铁：路由器中获取的。）

现在我需要帮助（请注意侧边栏模板以供参考:)

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

我为#each块中的每个对象使用相同的模板。问题是渲染的回调捕获第一个对象的数据，将上下文切换到另一个对象并不会实际重新加载或刷新页面。

如果我只使用一些带有{{objectProperty}}的HTML，那么我知道它会动态更新。但我没有使用任何Spacebars标签，只是一个包含图形的div。

点击侧边栏中的<a>标记后，重新渲染/重新加载展示模板的简单，优雅方法是什么？

更新：感谢@tarmes

这是我的工作代码：

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);  
      }
    });
  });
}

我所做的就是添加一个Meteor方法，通过ID查询数据库中的对象。

Answer 1

这样的事情怎么样：

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);  
    });
}

每当控制器的参数发生变化时，自动运行将重新运行（我假设如果路由中有_id等，他们会这样做），从而强制更新。

流星：重复使用Chart-Div的模板

1 个答案: