Включить помощник шаблона Meteor

У меня есть шаблон с таблицей, созданной путем перебора массива выбранных пользователем компаний, которые хранятся по символу тикера в атрибуте документа с именем 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 ""
    }
}

person Bren    schedule 02.07.2015    source источник


Ответы (2)


Шаблон 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';
    }
})
person k.chao.0424    schedule 02.07.2015
comment
Не уверен, что следую. Помимо реактивности, я не уверен, почему я не могу получить какое-либо начальное значение. Я добавил в свой пост дополнительный код, показывающий, что у меня есть помощник, который работает. Этот не извлекается из какой-либо коллекции, но все результаты отображаются правильно без добавления кода в файл HTML. Я думаю, что оригинальный помощник переключения также будет работать здесь. - person Bren; 03.07.2015
comment
Также отредактировал свой пост - изначально я написал, что не могу изменить значение. Должен был сказать, что я не мог получить значение вообще - person Bren; 03.07.2015

Просто быстро просмотрите свой код, всего несколько вещей.

Вы установили переменные метрики и периода в области окна, а не в области шаблона. Вот почему вы не можете получить доступ к метрической переменной в вашем помощнике. Чтобы исправить это, просто удалите 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);
  }
});

Затем, используя их в качестве стратегии, вы можете просто иметь помощника для своих заголовков и значений, определяя метрику по запросу и ограничивая ее.

person Flanamacca    schedule 03.07.2015
comment
Спасибо, я думал, что делаю что-то не так с объявлением этих переменных. Что касается всего остального, то, поскольку результат помощника headingNum изменяется правильно, когда я изменяю значение метрики, я не уверен, зачем нужно писать реактивную переменную. Похоже, проблема в том, что контексты данных для headingNum и для valuationNum разные. Но я не знаю, как получить доступ к каждому элементу в {{#each}}{{each}} через помощник (я могу получить доступ только в том случае, если я ссылаюсь на один путь к документу, например this.reported.capTable.enterpriseValue, непосредственно в пробелы. - person Bren; 03.07.2015
comment
С вашим помощником передайте ему полезную нагрузку родительских данных - {{headingNum ../}} и headingNum: function (datapayload) { } - person Flanamacca; 03.07.2015
comment
Извините, я был в стороне от этого, поэтому просто возвращаюсь к вашему комментарию - можете ли вы уточнить, что вы подразумеваете под полезной нагрузкой данных? - person Bren; 24.07.2015