使用 BlazeJS 访问文档

Question

我有一个 HTML 部分，我想使用 BlazeJS 打开/关闭它。 HTML 看起来像：

<div class="ui small buttons" style="margin: 2em 0em 2em 0em">
      <button id="driver_button" class="ui green button">Driver</button>
      <div class="or"></div>
      <button id="rider_button" class="ui green button">Rider</button>
</div>

<div id="driver_field">
      <div class="fields">
        {{> Text_Form_Control label="Car Model" placeholder="Toyota Tacoma 2016" value=profile.car errorMessage=(fieldError "car")}}
        {{> Select_Form_Control label="Years Owned" placeholder="3" value=profile.year errorMessage=(fieldError "year")}}
      </div>
      <div class="fields">
        {{> Select_Form_Control label="Number of Seats" placeholder="5" value=profile.seats errorMessage=(fieldError "seats")}}
      </div>
    </div>

<div id="rider_field">
      <div class="fields">
        {{> Text_Form_Control label="Car Model" placeholder="Toyota Tacoma 2016" value=profile.car errorMessage=(fieldError "car")}}
        {{> Select_Form_Control label="Years Owned" placeholder="3" value=profile.year errorMessage=(fieldError "year")}}
      </div>
      <div class="fields">
        {{> Select_Form_Control label="Number of Seats" placeholder="5" value=profile.seats errorMessage=(fieldError "seats")}}
      </div>
</div>

相应文件中的相关 Javascript 可以在以下位置找到：

Template.Profile_Page.events({
 'click #driver_button'(event, instance) {
    event.preventDefault();
    const driver = instance.getElementById('driver_field');
    const rider = instance.getElementById('rider_field');
    driver.style.display = 'block';
    rider.style.display = 'none';
    console.log('hello');
  },
  'click #rider_button'(event, instance) {
    event.preventDefault();
    const driver = instance.getElementById('driver_field');
    const rider = instance.getElementById('rider_field');
    driver.style.display = 'none';
    rider.style.display = 'block';
  },
})

但是，实例与文档不对应。如何从事件处理程序访问 div？

Answer 1

所以基本上你想要的是：

1. 根据单击的按钮显示相关部分。
2. 从字段中获取值。

根据点击的按钮显示相关部分。

您可以使用模板内部的#if条件来实现条件检查。如果 if 块返回 true，则 #if 条件中的任何内容都将呈现。到目前为止，模板的 if 条件仅支持布尔值。更多解释here

每当单击一个按钮时，您都会在 Session 变量中设置一个布尔标志。并且这个会话变量的值通过助手传递给模板 - 这反过来会根据真实性呈现 if 块内的内容。

让我知道这个解释是否令人满意。如果没有，我可以改写更好。

模板页面：

<template name="Profile_Page">
<div class="ui small buttons" style="margin: 2em 0em 2em 0em">
      <button id="driver_button" class="ui green button">Driver</button>
      <div class="or"></div>
      <button id="rider_button" class="ui green button">Rider</button>
</div>

{{#if driverButtonClicked}}
<div id="driver_field">
      <div class="fields">
        {{> Text_Form_Control label="Car Model" placeholder="Toyota Tacoma 2016" value=profile.car errorMessage=(fieldError "car")}}
        {{> Select_Form_Control label="Years Owned" placeholder="3" value=profile.year errorMessage=(fieldError "year")}}
      </div>
      <div class="fields">
        {{> Select_Form_Control label="Number of Seats" placeholder="5" value=profile.seats errorMessage=(fieldError "seats")}}
      </div>
    </div>
{{/if}}

{{#if riderButtonClicked}}
<div id="rider_field">
      <div class="fields">
        {{> Text_Form_Control label="Car Model" placeholder="Toyota Tacoma 2016" value=profile.car errorMessage=(fieldError "car")}}
        {{> Select_Form_Control label="Years Owned" placeholder="3" value=profile.year errorMessage=(fieldError "year")}}
      </div>
      <div class="fields">
        {{> Select_Form_Control label="Number of Seats" placeholder="5" value=profile.seats errorMessage=(fieldError "seats")}}
      </div>
</div>
{{/if}}
</template>

助手

Template.Profile_Page.events({
 'click #driver_button'(event, instance) {
    event.preventDefault();
    Session.set("showDriverForm",true);
  },
  'click #rider_button'(event, instance) {
    event.preventDefault();
    Session.set("showRiderForm", true);
  },
});

Template.Profile_Page.helpers({
  driverButtonClicked: function(){
    return Session.get("showDriverForm");
  },
  riderButtonClicked: function(){
    return Session.get("showRiderForm");
  }
});

从字段中获取值：

由于您使用的是文本字段，因此您可以使用change 侦听器来检测这些字段中值的更改。

示例截图。 （我添加了一个 id 字段来唯一区分表单字段。

{{> Text_Form_Control id="carModels" label="Car Model" placeholder="Toyota Tacoma 2016" value=profile.car errorMessage=(fieldError "car")}}
        {{> Select_Form_Control id="yearsOwned" label="Years Owned" placeholder="3" value=profile.year errorMessage=(fieldError "year")}}

事件将包含：

'change #carModels' (event){
    var models=event.target.value;
},
'change #yearsOwned' (event){
  var years=event.target.value;
}