javascript - Meteor动态创建对象并引用它们？//有没有简单的方法来做到这一点

Question

所以，我对 JavaScript 和 Meteor 都很陌生，所以我只知道一些事情。

学习 JavaScript 和 Meteor，我给自己设定了一个挑战，要制作一个 3 x 3 的字段，其中包含单独的计数器，如果您单击单元格，就会计数。

我实现了我的第一个目标:http://9fields.meteor.com/

我为自己设定的第二个目标是尝试使其易于扩展。比如说，我想要制作相同的字段，但是 7x7。

每个单元格都有自己的模板。

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

每个单元格都有自己的计数器，每个单元格都有一个事件处理程序和一个用于注册点击的帮助程序

Template.zelle1.helpers({
counter: function () {
  return Session.get("counter1");
}

});

Template.zelle1.events({
"click td": function() {
  return Session.set("counter1", Session.get("counter1")+1);
}
});

然后我又粘贴了代码 8 次并替换了数字。

我认为唯一符合第二个目标标准的是我创建表格的方式。

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

与此数组结合(数组是正确的词吗？)

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},
];

我的问题:我是否必须为这 9 个字段制作 9 个模板、9 个助手和 9 个事件？这意味着如果我想制作一个 7x7 字段，我需要粘贴代码 49 次？或者有更有效的方法来做到这一点吗？

非常感谢您阅读本文!

Answer 1

让我们提出第三种方法来解决这个问题:)您始终可以使用类似以下内容来填充多个 session 变量:

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

或者也许在Session中使用一个数组。它甚至可以是对象数组:

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

这与使用 ReactiveVar 的方法基本相同，只是您使用的是全局变量 (Session)，而不是作用域变量。您的整个应用程序将能够访问您在 Session 中存储的内容。

此外，您也许不应该使用绑定(bind)到每个字段的模板，而应该使用 {{#each}}

进行迭代

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

这里的问题是您无法控制当前正在渲染哪个单元格，因此您需要为每个 {{#each}} 运行添加索引。这就是为什么我建议使用新的全局助手 withIndex:

Template.registerHelper('withIndex', function (list) {
var withIndex = _.map(list, function (v, i) {
    v.index = i;
    return v;
});
return withIndex;
});

您可以像使用数组中的任何其他字段一样使用新的索引。您将需要它来确定单击了哪个数字以及在哪里增加计数器。我使用 td 的 id 值来存储单击的单元格的索引。

<template name="zelle">                      
  <td class="box" id="zelle-{{index}}">                          
    <p class="textinbox">{{name}} with a count of {{count}}</p>  
  </td>                                     
</template>  

Template.fields.helpers({
    fields: function () {
        return Session.get("fields");
    }
});