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

Question

Using the meteor.js framework, how can the value of a HTML element be selected in the "meteor way"? By using a jQuery-selector the browser would iterate through the DOM for every item, which is very expensive, wouldn't it?

The meteor tutorial uses a submit form and handles the template variable in a onSubmit-event. But how is it done if there is no onSubmit (and therefore no template-variable containing the element in question?

Could someone help out with the following example given, please?

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

You can use the template instance's jQuery . It will scope only the elements of the current template:

The template instance serves as the document root for the selector. Only elements inside the template and its sub-templates can match parts of the selector.

This results in a higher performance but requires you to control the granularity and scope of the elements to be searched.

Example of selector scopes

Just compare the output of the follwing example:

'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'));
}

Applied to your code

it results in the following code:

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

Answer 2

Try adding names to your divs

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

Then in your click event:

click.save(event, template){

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

Let us know if it worked.