Question

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

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';
  },
})

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

f=lambda v: 1 if v>0.5 else 0  
vf=np.vectorize(f)  
Y=vf(A)

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

Answer 1

所以基本上你想要的是：

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

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

您可以使用模板中的#if条件来完成条件检查。如果if块返回true，则#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;
}

使用BlazeJS访问文档

1 个答案:

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

从字段中获取值：