流星动态表与模板

Question

我正在使用handontables Meteorjs包，表格被插入div onRendered。我希望多次使用相同的模板，具体取决于之前输入的名称数量。

我在表格div上创建了动态名称，如此

<template name="Dividends">
<div id="dividends{{tName}}" class="table-container table-group"></div>
<div id="payments{{tName}}" class="table-container"></div>
</template>

tName返回创建时传递的模板名称。

{{>Dividends tName="dividends"}}
<hr>
<h5>Corporation Tax</h5>
{{>Dividends tName="corpTax"}}

我的问题是在js

Template.Dividends.onCreated(function() {
    var self = this;
    self.autorun(() => {
        self.subscribe('dividendsData');
        self.subscribe('dividendsPayments');
    });
});

Template.Dividends.onRendered(function() {
    var tempData = Session.get('data');
    var div_data = [];
    var pay_data = [];

    var div_container = document.getElementById('dividends');
    var pay_container = document.getElementById('payments');

    console.log(this.data.tName)
    var div_table = new Handsontable(div_container, {
        data: div_data,
        minSpareCols: 0,
        minSpareRows: 0,
        minCols: 1,
        rowHeaderWidth: 210,
        maxCols: 1,
        minRows: 2,
        maxRows: 2,
        rowHeaders: ['Opening Dividends ', 'Rate'],
        colHeaders: ['Opening'],
        columns: [
        {
            data: 'opening',
        }],
        cells: function(row, col, prop, value) {
            var cellProperties; 
            if(row == 0){
                cellProperties = {
                    type: 'numeric',
                    format: '$0.00'
                };
            }else if(row == 1){
                cellProperties = {
                    type: 'numeric',
                    format: '0.00%'
                };
            };
            return cellProperties;
        },
        afterChange: function(change, source) { // "change" is an array of arrays. 
            if (source !== "loadData") { // Don't need to run this when data is loaded
                for (i = 0; i < change.length; i++) { // For each change, get the change info and update the record
                    var rowNum = change[i][0]; // Which row it appears on Handsontable
                    var row = div_data[rowNum]; // Now we have the whole row of data, including _id
                    var key = change[i][1]; // Handsontable docs calls this "prop"
                    var oldVal = change[i][2];
                    var newVal = change[i][3];
                    Meteor.call('upsertDividendsData', tempData._id , rowNum, key, newVal);
                }
            }
        },
    });

    var pay_table = new Handsontable(pay_container, {
        data: pay_data,
        minSpareCols: 0,
        minSpareRows: 0,
        rowHeaderWidth: 210,
        minCols: 12,
        maxCols: 12,
        minRows: 2,
        maxRows: 2,
        rowHeaders: ['Payments - opening ', 'Payments - current'],
        colHeaders: ['M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12'],
        stretchH: 'all',
        columns: [
        {
            data: 'M0',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M1',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M2',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M3',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M4',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M5',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M6',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M7',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M8',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M9',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M10',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M11',
            type: 'numeric',
            format: '0.00%'
        }, ],
        afterChange: function(change, source) { // "change" is an array of arrays. 
            if (source !== "loadData") { // Don't need to run this when data is loaded
                for (i = 0; i < change.length; i++) { // For each change, get the change info and update the record
                    var rowNum = change[i][0]; // Which row it appears on Handsontable
                    var row = pay_data[rowNum]; // Now we have the whole row of data, including _id
                    var key = change[i][1]; // Handsontable docs calls this "prop"
                    var oldVal = change[i][2];
                    var newVal = change[i][3];
                    Meteor.call('upsertDividendsPayments', tempData._id , rowNum, key, newVal);
                }
            }
        },

    });


    Tracker.autorun(function() { // Tracker function for reactivity
        tempData = Session.get('data');
        div_data = DividendsData.find({fileId: tempData._id}).fetch(); // Tie in our data
        pay_data = DividendsPayments.find({fileId: tempData._id}).fetch();
        div_table.loadData(div_data);
        pay_table.loadData(pay_data);
    });

});

Template.Dividends.helpers({
    getID: function(){
        return this.id;
    }
});

正如您所知，问题是我的表名如

var div_table 

＆安培;

var div_table 

我需要像html id一样动态。我尝试了一些像id这样的东西，但注意到对我来说是正确的。我注意到的另一件事是onRendered函数似乎只被触发了一次。

如果有人可以请教育我，如何处理这将是很好的。