[Solved] Template.X.events this is window object

blaze
1

So, I have a template

<template name="Person_update">
  {{#with person}}
  <!-- Form -->
  <div class="row">
    <div class="col s12 m12 l12">
      <div class="card-panel z-depth-2">
        <form>
          <!-- General Information -->
          <div class="section">
            <h5>Update {{fullname}}</h5>
            <div class="row">
              <!-- First Name -->
              <div class="input-field col s12 m4 l4">
                <input id="firstname" type="text" value="{{firstname}}">
                <label for="firstname">First Name(s)</label>
              </div>
              <!-- /First Name -->
              <!-- Last Name -->
              <div class="input-field col s12 m4 l4">
                <input id="lastname" type="text" value="{{lastname}}">
                <label for="lastname">Last Name</label>
              </div>
              <!-- /Last Name -->
              <!-- Sex -->
              <div class="input-field col s6 m2 l1 offset-l1">
                <p class="radio-checkbox-alignment">
                  <input class="with-gap" name="sex" type="radio" id="female" {{isSexChecked 'female'}}/>
                  <label for="female">Female</label>
                </p>
              </div>
              <div class="input-field col s6 m2 l1">
                <p class="radio-checkbox-alignment">
                  <input class="with-gap" name="sex" type="radio" id="male" {{isSexChecked 'male'}}/>
                  <label for="male">Male</label>
                </p>
              </div>
              <!-- /Sex -->
            </div>
          </div>
          <!-- /General Information -->

          <!-- Address -->
          {{> Address_form address}}
          <!-- /Address -->

          <!-- Contact -->
          {{> Contact_form contact}}
          <!-- /Contact -->

          <!-- Actions -->
          <div class="row">
            <div class="col s6 m4 l4">
              <a href="{{pathFor 'person.show' _id=_id}}" class="waves-effect waves-light btn"><i class="material-icons left">clear</i>Cancel</a>
            </div>
            <div class="col s6 m4 l4 offset-m4 offset-l4 right-align">
              <a id="person_update_save" class="waves-effect waves-light btn"><i class="material-icons left">done</i>Save</a>
            </div>
          </div>
          <!-- /Actions -->

        </form>
      </div>
    </div>
  </div>
  <!-- /Form -->
  {{/with}}
</template>

And some events for the template:

Template.Person_update.events({

  'change input': (event, template) => {
    // Instance of Person, Address or Contact
    const doc = this;
    // Get an input which value was changed.
    const input = event.currentTarget;
    // Get field name.
    let fieldName = input.id;
    // Convert value type if needed.
    let fieldValue;
    if (input.type === 'radio') {
      // Catch special case if we have gender selection
      if(fieldName === 'female' || fieldName === 'male') {
        fieldValue = fieldName;
        fieldName = 'sex';
      } else {
        return false
      }
    } else if (input.type === 'number') {
      fieldValue = input.valueAsNumber
    } else {
      fieldValue = input.value;
    }
    // Set new value
    doc[fieldName] = fieldValue;
    // Validate given field.
    doc.validate({
      fields: [input.id]
    }, (err) => {
      if (err) {
        $(`#${fieldName}`).addClass('invalid');
        if (ValidationError.is(err)) {
          showError(err.reason)
        } else {
          console.log(err);
        }
      } else {
        if($(`#${fieldName}`).hasClass('invalid')) {
          $(`#${fieldName}`).removeClass('invalid');
        }
        $(`#${fieldName}`).addClass('valid');
      }
    });
    return false
  },
  ...
});

My problem is, that once I change something and the event is triggered, this is the window object. BUT, if I set a breakpoint in the code and type this in the browser console, I get the desired person object.
Any ideas why that happens and how I can get the correct object?

2

Use template.data instead. this is somewhat unreliable in events.

3

template.data is an empty object :confused:

4

Alright, let’s try Template.currentData().

And the person in #with person, is it from the outer context or is it a helper?

5

Is also an empty object … person is from a helper. The with block works and displays the correct data

6

So, apparently you shouldnt use an arrow function for this :smiley: If you use the good old function() {}, this works as expected.