Флажок не отображать элемент при включении в метеор - PullRequest
Новая
       5

Флажок не отображать элемент при включении в метеор

0 голосов
/ 12 марта 2019

Я работаю в метеоре и пытаюсь отобразить блок кода, когда установлен флажок. Я новичок в JS и JQuery, но у меня есть исследования различных способов написания JS. Вот что я придумал: 

<div class="recipient">
      <div class="toRecipient-container">
        <label class="toRecipient">TO:</label>
        <input class="toRecipient" type="text" size="45">
      </div>
        <br>
      <div id="checkbox-container" class="checkbox-container">
        <label for="newClient">New Client
        <input id="newClient" class="newInfo" type="checkbox" onclick="toggle()"></label>
        <label for="newBilling" style="padding-left: 20px;">New Billing
        <input id="newBilling" class="newInfo" type="checkbox"></label>
      </div>
    </div>
    <div id="billingDetails-container" class="billingDetails-container">
      <div class="billingDetails">
          <label>Billing Contact:</label>
          <input class="billingContact" type="text" size="45">
          <label>Billing Phone:</label>
          <input class="billingPhone" type="text" size="45">
        <div>
          <label>Billing Address:</label>
          <input class="billingAddress" type="text" placeholder="Street Address" size="45">
          <input class="billingAddress" type="text" placeholder="City" size="45">
          <input class="billingAddress" type="text" placeholder="State" size="45">
          <input class="billingAddress" type="text" placeholder="Zip Code" size="45">
        </div>
        <label>Billing Email:</label>
        <input class="billingEmail" type="text" size="45">
      </div>
    </div>

И мой JS: 

    Template.InvoicePage.onCreated(function () {
  this.state = new ReactiveVar();
});

Template.InvoicePage.helpers({
  toggle: ()=>{
    var checkBox = document.getElementById("newClient");
    var displayBlock = document.getElementById("billingDetails-container");
    if (checkBox.checked == true) {
      displayBlock.style.display = "block";
    } else {
      displayBlock.style.display = "none";
    }
  },
});

Template.InvoicePage.events({
  'change #newClient'(event, instance) {
    instance.state.set('newClient', event.target.checked)
  },
});

Когда я отмечаю флажок, я получаю ошибку, что 'toggle' не определено. Должно ли это быть событие шаблона вместо помощника? Чего мне не хватает?

Ответы [ 2 ]

0 голосов
/ 13 марта 2019

Я полагаю, что вы пытаетесь показать billingDetails-container, когда пользователь устанавливает флажок New-Client.Если это правильно, ниже должно работать

HTML 

<div class="recipient">
  <div class="toRecipient-container">
    <label class="toRecipient">TO:</label>
    <input class="toRecipient" type="text" size="45">
  </div>
  <br>
  <div id="checkbox-container" class="checkbox-container">
    <label for="newClient">New Client
    <input id="newClient" class="newInfo" type="checkbox"></label>
    <label for="newBilling" style="padding-left: 20px;">New Billing
    <input id="newBilling" class="newInfo" type="checkbox"></label>
  </div>
</div>
{{#if showBillingDetails}}
  <div id="billingDetails-container" class="billingDetails-container">
    <div class="billingDetails">
      <label>Billing Contact:</label>
      <input class="billingContact" type="text" size="45">
      <label>Billing Phone:</label>
      <input class="billingPhone" type="text" size="45">
      <div>
        <label>Billing Address:</label>
        <input class="billingAddress" type="text" placeholder="Street Address" size="45">
        <input class="billingAddress" type="text" placeholder="City" size="45">
        <input class="billingAddress" type="text" placeholder="State" size="45">
        <input class="billingAddress" type="text" placeholder="Zip Code" size="45">
      </div>
      <label>Billing Email:</label>
      <input class="billingEmail" type="text" size="45">
    </div>
  </div>
{{/if}}

JS 

Template.InvoicePage.events({
  'change #newClient'(event, instance) {
    instance.state.set({
      'newClient': event.target.checked  //Here, we are set the newclient property of state object based on client's selection.
    });
  }
});

Template.InvoicePage.helpers({
  showBillingDetails() {
    const state = Template.instance().state.get();
    return state && state.newClient; //Here, we use the newclient property of state to decide whether or not to display the billingDetails-container
  }
});
0 голосов
/ 12 марта 2019

Я никогда ничего не делал с метеором.На сайте много разных фреймворков.Я не уверен, какой вы используете (если есть).Вы не можете использовать angular, реагировать и vuejs все одновременно.

Если я не ошибаюсь, и есть особая причина, по которой 

Template.InvoicePage.helpers({...});

просто выполните 

function toggle() {
    var checkBox = document.getElementById("newClient");
    var displayBlock = document.getElementById("billingDetails-container");
    if (checkBox.checked == true) {
        displayBlock.style.display = "block";
    } else {
        displayBlock.style.display = "none";
    }
}

Это не имеет ничего общего с фреймворком.Просто ванильный JavaScript и HTML.

...