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

讓我們知道它是否有效。