Question

使用meteor.js框架，如何在＆＃34;流星方式中选择HTML元素的值＆＃34;？通过使用jQuery选择器，浏览器将遍历每个项目的DOM，这是非常昂贵的，不是吗？

meteor教程使用提交表单并在onSubmit事件中处理模板变量。但是，如果没有onSubmit（因此没有包含相关元素的模板变量，它是如何完成的？

请问有人给出以下示例帮助吗？

cars.html

yourList = [3, 2, 2, 4, 3, 3, 2] 

def counter(a):
  b = 0
  x = 0
  for i in a:
    if i == b and i == 2:
      x += 1 
    b == i
  return x

print(counter(yourList))

cars.js

<template name="Car">
    <div class="car-item" contenteditable="true">BMW</div>
    <div class="edit-bar"><a href="#" class="save">save</a></div>
</template>

Answer 1

您可以使用template instance's jQuery。它仅限范围当前模板的元素：

模板实例充当选择器的文档根。只有模板中的元素及其子模板才能匹配选择器的一部分。

这会带来更高的性能，但需要您控制要搜索的元素的粒度和范围。

选择器范围的示例

只需比较以下示例的输出：

'click .save'(event, templateInstance){
    //access content of '.car-item' here when '.save' is clicked

    // global scope search
    console.log($('div'));

    // template scope search
    console.log(templateInstance.$('div'));
}

应用于您的代码

它产生以下代码：

'click .save'(event, templateInstance){
    // access content of '.car-item' here when '.save' is clicked
    const carItems = templateInstance.$('.car-item');
    // ... process car items
}

Answer 2

尝试为div添加名称

<div class="car-item" contenteditable="true" name="car">

然后在您的点击事件中：

click.save(event, template){

   var car = event.target.car.value;
}

告诉我们是否有效。

meteor.js：如何访问HTML元素的值

2 个答案:

选择器范围的示例

应用于您的代码