在单独的模板事件上更新模板

Question

我有一个小流星应用程序。里面有两个模板，一个带有选择器，一个带有简单文本。 Anytime the selector is changed, I would like to get the second template to re-render.我对此有点陌生，所以任何帮助将不胜感激。

Main.html

<head>
  <title>btn-test</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> selector}}
  {{> display}}
</body>


<template name="selector">
    <select id="carSelector">
        <option value="volvo" selected="selected">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</template>

<template name="display">
    {{selectorValue}}
</template>

Main.js

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';


Template.selector.events({
  'change #carSelector': function(event){
    return event.currentTarget.value
  }
});

Template.display.helpers({
  "selectorValue": function(){
    return $('#carSelector').val();
  }

});

Answer 1

您需要使用响应式数据源来存储所选值，我看到您已经安装了 ReactiveVar 包，所以让我们使用它吧：

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';
const selectedValue  = new ReactiveVar('');

Template.selector.events({
  'change #carSelector': function(event){
    selectedValue.set(event.currentTarget.value);
  }
});

Template.display.helpers({
  "selectorValue": function(){
    return selectedValue.get();
  }

});

在单独的模板事件上更新模板

Updating a template on separate template event

meteor

spacebars

meteor-blaze