Question

这可能是一个非常愚蠢的问题......我正在使用Meteor-ui-progress-circle并且我希望在百分比（存储在响应式收集进度中）更改时重新绘制模板（当前，当我点击“播放”按钮）。我想我必须使用Blaze.render，但我真的不明白它是如何工作的。

这是我主模板的一部分（在Jade中）：

div.panel-body
    div.col-md-9.col-sm-8 
         p Lorem ipsum...
    div.col-md-3.col-sm-4#progress-circle
        +progressCircle progress="0" radius="100" class="green"

我的JavaScript：

Template.controlBar.events(
{
  "click .play-button": function ()
  {
    var tmp = Progress.findOne({});
    if (!tmp)
    {
        Meteor.call('createProgress');
        tmp = Progress.findOne({});
    }
    var val = tmp.progressValue;
    val += 10;
    if (val > 100)
        return;
    Meteor.call('updateProgess', tmp._id, val);
    Template.progressCircle.progress = tmp.progressValue;
    Blaze.render(Template.progressCircle, $("#progress-circle")[0]);
},

这样做......每次点击播放按钮时，我都会显示几个模板。我不明白如何指定我不想要一个新模板，只是重新渲染我已经拥有的模板。

Answer 1

我不确定我是否完全明白你的问题，但我会尽力帮助你最好地理解模板以及我是如何使用它们的。如果有人在这里看到任何不正确的信息，请说出来，以便我自己更好地了解并纠正这个答案。

首先，Template.XXX.events处理程序。在事件处理程序中，您使用的是没有参数的函数。实际上，您可以为这些事件处理函数接受2个参数：event和template。所以，你可以这样做：

Template.controlBar.events({
  'click .play_button': function(event, tmpl) {
    tmpl.$('div#progress-circle').doSomething();
  }
});

注意tmpl.$()来电？这表示使用jQuery来查找指定的选择器，但仅限于当前模板。这是使用类来概括组件的一种很好的方法，但是然后能够将选择过滤到同一模板中的那些......

...这让我接下来的建议：过度使用子模板。我可以在我的页面上识别为“自主组件”的任何组件，我将其视为单独的模板。例如，我最近在制作一个自定义报告页面，该页面有一个表格，一些D3图表代表一些实时数据。在此报告页面中，我为“页面”定义了一个主模板，然后将每个D3图定义为单独的模板，该表是另一个单独的模板。这有几个好处：

页面“组件”的分区，允许代码重用（我现在可以在任何页面上放置相同的图形，因为它现在是一个自治的“组件”
使用上面的Template.XXX.events技巧“缩小”我的元素范围搜索到该模板中的元素的优势
防止总页面刷新，因为Meteor足够智能，只刷新需要刷新的模板，这也加快了页面本身的响应速度。

结果，我试图大量应用我的模板。在你的情况下，对我来说，如果我在页面上有多个进度条，我可能会把它们变成单独的模板。如果我有一个进度条，如果有必要将其分开以便于数据处理，我甚至可能会这样做。

最后，模板之间的相互通信。这有时很棘手，但我发现最好，最有效的方法是通过Session个变量。我通常使用的模式是让我的模板的数据由模板.helper返回，其执行如下操作：

Template.controlBar.helpers({
  progressData: function() {
    if (!Session.equals('playId', null)) {
      return Progress.findOne({_play_id: Session.get('playId')});
    }
  }
});

因为Helpers是被动的，并且Sessions是被动的，所以只要在Session中更改'playId'，就会重新呈现模板。可以从客户端代码中的任何位置设置相应的Session变量。同样，当您将模板的范围缩小到单个组件时，这往往效果最佳。这里需要注意的是，Meteor中的Session对象与Java等其他语言中的“会话”不同，后者通常使用cookie和会话令牌/ id。 Meteor会话的工作方式大不相同，并且无法在页面重新加载或关闭浏览器后继续存在。

使用Meteor-ui-progress-circle（访问在HTML中创建的Template变量）

1 个答案: