Question

此流星代码具有menuItems来填充模板中的li。单击某个项目时，我需要获取＆＃34; login＆＃34;的值。来自被点击的对象的键我无法使用menuItems.find();，因为它不是mongo集合我无法创建json对象JSON.parse(menuItem)，因为在控制台中未定义menuItem 我想不出谷歌的用途。

由于

Template.mainMenu.helpers({
  menuItems: [
    {menuItem: "task1", login: false},
    {menuItem: "task2", login: true},
    {menuItem: "task3", login: true},
    {menuItem: "task4", login: true},
    {menuItem: "task5", login: true},
    {menuItem: "task6", login: true},
    {menuItem: "task7", login: false},
    {menuItem: "task8", login: false},
    {menuItem: "task9", login: false}
  ]
});

Template.mainMenu.events({
  'click .menuItem': function (event) {
    var item = $(event.currentTarget).data('value');

    var isLogin = what is the value of login for this "item"
  }
});

Answer 1

这是如此基本，你应该在前100行文档中看到答案。不过，让我解释一下。

您正在使用帮助程序将数据放入li个元素中。此助手返回一个对象数组，因此您可以将其用作模板中的可迭代对象，即使用each块：

{{#each menuItems}}
  <li class="menuItem">{{menuItem}} {{login}}</li>
{{/each}}

类似的东西。

然后，您有一个事件处理程序，它监听每个具有menuItem类的元素的每个click事件。把它想象成jQuery的事件处理程序，所以，在jQuery中，你会用这样的方式编写它：

$('.menuItem').each(function () {...});

在传递给each方法的函数中，您可以通过this关键字访问iterable的元素。因此，例如，您想要访问任何iterable项的login属性。你可以这样做

$('.menuItem').each(function () {
  console.log(this.login);
});

让我们回到流星。在事件处理程序中，您可以使用相同的方法来访问对象的任何属性。 this将在用户点击时引用该元素。所以答案是

Template.mainMenu.events({
  'click .menuItem': function () {
    const item = this;

    // do whatever you need with this object
  }
});

模板事件处理函数有两个参数，一个用于事件，另一个用于模板。您可能需要它们，但在这种特殊情况下，两者都是不必要的，因此没有为分配为click事件的处理程序的函数提供参数。

请记住，模板中的each块会创建一个新的嵌套上下文，在此上下文中，this引用任何each块迭代的项。这就是您可以通过帮助程序引用JSON中每个对象的属性的原因：

{{#each menuItems}}
  <li class="menuItem">{{menuItem}} {{login}}</li>
{{/each}}

您可以看到您没有menuItem或login帮助者，但无论如何都可以。事实上，这是

的简短形式

{{#each menuItems}}
  <li class="menuItem">{{this.menuItem}} {{this.login}}</li>
{{/each}}

从流星中的json对象数组中获取给定键的值

1 个答案: