meteor.js：如何获取HTML元素的值

Question

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

流星教程使用提交表单并在onSubmit事件中处理模板变量。 但是，如果没有onSubmit（因此没有包含所讨论元素的模板变量）怎么办？

有人可以帮忙提供以下示例吗？

cars.html

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

cars.js

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

Answer 1

您可以使用模板实例的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;
}

让我们知道它是否有效。