Question

我要说的一件事是我不熟悉网络开发和流星，所以任何帮助都会受到赞赏。

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

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定义为events的方式无效。因为这不是流星的工作方式。在您的情况下，您需要reactive Dict来获取calculations值，并且您将在助手中返回reactive Dict以获得反应。您可以拥有全局变量或模板级变量。你需要安装反应式Dict包。如果没有，请写上命令meteor add reactive-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);
    }
});

流星表模板没有填充

1 个答案: