切換到Meteor模板助手

Question

我有一個帶有表格的模板，該表格是通過遍歷一系列用戶選擇的公司而創建的，這些公司通過股票代碼存儲在稱為selections的文檔屬性中。 我會根據不同的用戶選擇（稱為metric顯示與每個公司相關的不同值。

我在編寫需要根據用戶選擇更改值的if / else語句時遇到麻煩。 使用下面的代碼， headingNum和headingDen正確顯示。 與單個選擇相關聯的companyName也是如此。 如果我用this.reported.capTable.enterpriseValue替換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

流星的模板建立在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

只需快速瀏覽一下代碼，就可以了解幾件事。

您已在窗口范圍而非模板范圍設置了度量和期間變量。 這就是為什么您無法訪問助手中的指標變量的原因。 要解決此問題，只需從最初創建metric變量的位置刪除var。 但是，這不是管理范圍和變量管理的好方法。

我想說，要使其真正有效，您需要一個幫助器和事件處理程序來以反應方式跟蹤度量的獲取和設置（reactive-var軟件包對此有所幫助）

設置指標反應變量

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

獲取指標

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

設置指標

Template.Table.events({
  'click .setMetric': function(event, template) {
    event.preventDefault();
    var metric = $(event.target).data('metric');
    if(metric) template.data.metric.set(metric);
  }
});

然后使用這些作為策略，您可以簡單地為標題和值提供幫助-確定按需度量並加以限制。