Question

我有一个小流星应用程序。里面有两个模板，一个带有选择器，另一个带有简单文本。无论何时更改选择器，我都希望得到第二个模板来重新渲染。我对此有点新意，所以任何帮助都会受到赞赏。

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

});

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

1 个答案: