javascript - 使用 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 block 返回 true，则 #if 条件内的任何内容都将呈现。截至目前，模板的 if 条件仅支持 bool 值。更多说明here

每当单击其中一个按钮时，您都会在 Session 中设置一个 bool 标志。多变的。这个 session 变量的值通过助手传递给模板 - 助手又根据真实性渲染 if block 内的内容。

请告诉我这个解释是否令人满意。如果没有，我可以更好地重写它。

模板页面:

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