Javascript 使用BlazeJS访问文档

我有一个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>

---

然而，实例和文档不对应。如何从事件处理程序访问div？

因此，基本上您需要的是：

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

从字段中获取值

根据单击的按钮显示相关部分。 您可以在模板内使用

#if

条件来实现条件检查。如果if块返回true，

#if

条件中的任何内容都将呈现。到目前为止，模板的if条件只支持布尔值。更多解释

无论何时单击其中一个按钮，都会在变量中设置布尔标志。这个会话变量的值通过helper传递给模板，helper根据真实性呈现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>

从字段中获取值： 由于您使用的是文本字段，因此可以使用

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

---

所以基本上你想要的是：

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

从字段中获取值

根据单击的按钮显示相关部分。 您可以在模板内使用

#if

条件来实现条件检查。如果if块返回true，则

#if

条件内的任何内容都将呈现。到目前为止，模板的if条件仅支持布尔值。更多说明

无论何时单击其中一个按钮，都会在变量中设置一个布尔标志。此会话变量的值将通过帮助程序传递给模板，帮助程序会根据真实性呈现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>

从字段中获取值： 由于您使用的是文本字段，因此可以使用

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