Question

我有一个模板，其中的表格是通过迭代一组用户选择的公司而创建的，这些公司通过股票代码符号存储在名为selections的文档属性中。我会根据不同的用户选择显示与每家公司相关的不同值，称为metric。

我在使用if / else语句编写帮助程序时遇到问题，根据用户选择更改值。通过以下代码，headingNum和headingDen正确显示。 companyName也是与个人选择相关联的。如果我将valuationNum替换为this.reported.capTable.enterpriseValue，则会显示正确的值。但是在使用帮助器时我无法显示它。

<template name="Table">
    <div>
        <table>
            <thead>
                <tr>
                    <th>Company</th>
                    <th>{{headingNum}}</th>
                    <th>{{headingDen}}</th>
                </tr>
            </thead>
            <tbody>
                {{#each selections}}
                    <tr>
                        <td>{{companyName}}</td>
                        <td>${{valuationNum}}</td>
                        <td>${{valuationDen}}</td>
                    </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</template>

JS档案

var metric = this.metric;
var period = this.period;
Template. Table.helpers({
    selections: function () {
        var selected = this.selections;
        return Companies.find({ticker: {$in: selected}})
    },
    headingNum: function () {
        switch (metric) {
            case "A":
                return "EV";
                break;
            case "B":
                return "Price";
                break;
            default:
                return "EV"
        }
    },
    valuationNum: function() {
        switch (metric) {
            case "A":
                return this.reported.capTable.enterpriseValue;
                break;
            case "B":
                return this.reported.capTable.lastClose;
                break;
            default:
                return ""
        }
    }
});

我尝试将{{#each}} {{each}}块分解为一个新模板，以查看它是否有助于数据上下文但没有运气（并且它会弄乱表格）。

我正确地写这些帮手吗？我还在JS文件中收到一条错误消息，指出reported是一个未解析的变量，即使这是正确的路径。

谢谢。

编辑：

这个助手有效，不知道为什么另一个没有：

headingNum: function () {
    var metric = this.metric;
    switch (metric) {
        case "EV/EBITDA":
            return "EV";
            break;
        case "Price/Earnings":
            return "Price";
            break;
        default:
            return ""
    }
}

Answer 1

Meteor的模板建立在blaze上，该模板在设计上具有反应性。这意味着模板将仅在数据依赖性值更改时重新呈现。在此示例中，仅在您修改Companies时。但是，当您修改metric的值时，模板将不会重新渲染，这就是您没有看到预期更改的原因。

实现目标的反应方式实际上是在模板内部放置度量开关逻辑：

{{#each selections}}
    <tr>
        <td>{{companyName}}</td>
        {{#if metricA}}
        <td>${{reported.capTable.enterpriseValue}}</td>
        {{else}}
        <td>${{reported.capTable.lastClose}}</td>
        {{/if}}
        <td>${{valuationDen}}</td>
    </tr>
{{/each}}

在JS中：

Template. Table.helpers({
    metricA: function() {
        return this.metric == 'A';
    }
})

Answer 2

只需快速浏览一下代码即可。

您已在窗口范围设置了指标和期间变量，而不是模板范围。这就是您无法访问助手中的度量变量的原因。要修复，只需从最初创建度量变量的位置删除var。但是，这不是管理范围和变量管理的好方法。

我想说要使其真正有效，您希望有一个帮助程序和事件处理程序来跟踪反应性获取和设置指标（reactive-var包对此有帮助）

设置公制反应变量

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="slist selected" id="id1"><a href="#!id10">Test1</a></li>
  <li class="slist" id="id2"><a href="#!id20">Test2</a></li>
  <li class="slist" id="id3"><a href="#!id30">Test3</a></li>
</ul>


<div class="content specials">
  <div class="contentEle id1">
    <img src="http://lorempixel.com/265/149/sports/" alt="" />
    <div class="text">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...</div>
  </div>
  <div class="contentEle id2">
    <img src="http://lorempixel.com/265/149/food/" alt="" />
    <div class="text">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...</div>
  </div>
  <div class="contentEle id1">
    <img src="http://lorempixel.com/265/149/sports/" alt="" />
    <div class="text">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...</div>
  </div>
  <div class="contentEle id3">
    <img src="http://lorempixel.com/265/149/food/" alt="" />
    <div class="text">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...</div>
  </div>
</div>

获取指标

Template.Table.created = function() {
  this.metric = new ReactiveVar();                                      
}

设置指标

Template.Table.helpers({
  getMetric: function() {
    return this.metric.get();
  }
})

然后使用这些作为策略，您可以简单地为您的标题和值提供帮助 - 根据需要确定指标并限制它。

切换Meteor模板助手

2 个答案: