javascript - Meteor 表模板未填充

Question

我要说的一件事是，我对网络开发尤其是 meteor 还是新手，因此我们将不胜感激。

我有一个网页，用户输入 2 个数字，通过单击按钮提交后将它们用作变量。这两个数字用于计算 JS 对象中的项目。当我提交图形后检查控制台时，对象显示了所有正确的图形，但是 html 并未进入模板。我的页面中确实有两个其他模板，它们工作正常。该表也会填充到页面中，但计算完成后不会填充所需的值。我已将代码放入Code Pen中。这是link 。下面是js代码。我也将 HTML 包含在 codepen 中。

Template.input_fields.events({
    'click #inputForm': function (e) {


        console.log("clicked");
        // create variables for user FTP and LTHR values
        var ftp_value = $("#ftp").val();
        var lthr_value = $("#lthr").val();

        // Calculation of training zones for power and heart rate.
        var calculations = [

            {end_1: ftp_value * .56},
            {end_2: ftp_value * .75},
            {end_3: lthr_value * .80},
            {end_4: lthr_value * .90},
            {tempo_1: ftp_value * .76},
            {tempo_2: ftp_value * .85},
            {tempo_3: lthr_value * .91},
            {tempo_4: lthr_value * .95},
            {ss_1: ftp_value * .86},
            {ss_2: ftp_value * .95},
            {ss_3: lthr_value * .96},
            {ss_4: lthr_value * .99},
            {threshold_1: ftp_value * .96},
            {threshold_2: ftp_value * 1.05},
            {threshold_3: lthr_value * 1},
            {threshold_4: lthr_value * 1.02},
            {vo2_1: ftp_value * 1.06},
            {vo2_2: ftp_value * 1.20},
            {vo2_3: lthr_value * 1.03},
            {vo2_4: lthr_value * 1.06},
            {anaerobic_1: ftp_value * 1.21},
            {anaerobic_2: ftp_value * 1.50},
            {anaerobic_3: "Over"},
            {anaerobic_4: lthr_value * 1.06},
            {np_2: ftp_value * 1.51}

        ];

        console.log(calculations);
        Template.table.helpers({table: calculations});
    }

Answer 1

您在事件中定义helpers的方式将不起作用。因为那不是 meteor 的工作方式。根据您的情况，您需要有一个 reactive Dict 它将获取您的 calculations 值，并且您将在您的帮助获得 react 性。您可以有一个全局变量或模板级变量。您需要安装响应式(Reactive) Dict 软件包。如果没有，请写入命令meteor addreactive-dict。你的代码将是这样的。

Template.input_fields.onCreated(function(){
    rd = new ReactiveDict('myDict');
    rd.set('calculations', []);
});

Template.input_fields.helpers({
    'table': function(){
         return rd.get('calculations'); // will return your array. when ever data changes, helper will change automatically.
    }
});

Template.input_fields.events({
    'click #inputForm': function(e) {
         ... your previous code here except last line. then
         rd.set('calculations',calculations);
    }
});