javascript - Meteor Dynamically Create Objects and refer to them? // Is there a simple way to do this -

so, im new both javascript , meteor, know handful of things.

learning both, javascript , meteor set myself challenge make 3 3 field of individual counters in them, count, if click cell.

i reached first goal: http://9fields.meteor.com/

the second goal set myself try make expandable. say, want make same field 7x7.

every cell has own template.

<template name="zelle1">                         <td class="box">                               <p class="textinbox">{{counter}}</p>     </td>                                      </template>                                    

every cell has own counter , every cell has 1 event handler , 1 helper register click

template.zelle1.helpers({ counter: function () {   return session.get("counter1"); }  });  template.zelle1.events({ "click td": function() {   return session.set("counter1", session.get("counter1")+1); } }); 

i pasted code 8 more times , replaced numbers.

the thing feel reaches criteria second goal way create table.

<table>                                              {{#each zellen}}                                     {{#if this.newrow}}                                  <tr></tr>                                        {{> ui.dynamic template=this.name}}          {{else}}                                             {{> ui.dynamic template=this.name}}          {{/if}}                                      {{/each}}                                    </table>                                         

in combination array (array right word?)

template.body.zellen = [ {name: "zelle1", newrow: false}, {name: "zelle2", newrow: false}, {name: "zelle3", newrow: false}, {name: "zelle4", newrow: true}, {name: "zelle5", newrow: false}, {name: "zelle6", newrow: false}, {name: "zelle7", newrow: true}, {name: "zelle8", newrow: false}, {name: "zelle9", newrow: false}, ]; 

my question: have make 9 templates , 9 helpers , 9 events 9 fields? meaning if want make 7x7 field need paste code 49 times? or there more efficient way this?

already thank reading through this!

let's propose third way approach problem :) can use following multiple session variables filled:

var fieldsize = 9; (i = 1; <= fieldsize; i++) {      session.set("counter" + i, i); // sets 9 session variables } 

or perhaps use array inside session. can array of objects:

var fieldsize = 9; var fields = []; (i = 1; <= fieldsize; i++) {     fields.push({name: i, count: i}); } session.set("fields", fields);  

this same approach using reactivevar, using global variable (session) instead of scoped one. entire application able access things store within session.

also, should perhaps not use template bound each field, iterate using {{#each}}

<template name="fields">                         {{#each withindex fields}}      {{> zelle}}   {{/each}}                                     </template>   

the trouble here have no control on cell rendering currently, need add index each of {{#each}} runs. why suggest new global helper withindex:

template.registerhelper('withindex', function (list) { var withindex = _.map(list, function (v, i) {     v.index = i;     return v; }); return withindex; }); 

you can use new index other field array. need determine number clicked , increase counter. i've used td's id value store index of cell clicked.

<template name="zelle">                         <td class="box" id="zelle-{{index}}">                               <p class="textinbox">{{name}} count of {{count}}</p>     </td>                                      </template>    template.fields.helpers({     fields: function () {         return session.get("fields");     } });