CODEWITHSUNDEEP
meteor
Maximus S
Maximus S

Reputation: 11125

Data available ("this") from a template event handler

projects.html

  {{#if projects}}
    {{#each projects}}
      <div class="project-item">
        <div class="project-name">
          {{name}}
        </div>
        <div class="project-settings">
          <span class="rename">Rename</span>
          <span class="edit">Edit</span>
          <span class="delete">
            <!-- Here -->
          </span>
        </div>
      </div>
    {{/each}}
  {{/if}}

projects.js

  Template.Projects.events({
    "click .project-item .delete": function (e, template) {
      e.preventDefault();
      debugger
      // "this" refers to the specific project
    }
  });

In an event handler, I noticed "this" conveniently refers to a specific object inside the template where the event is related to. For example, in this case, the delete button is inside each projects block, and the handler for the delete button has this = some project. This is convenient, but I'd like to know the scopes and rules more completely. Can someone explain in briefly and point me to the right document?

Upvotes: 0

Views: 14

Answers (1)

Billybobbonnet
Billybobbonnet

Reputation: 3226

This is a data context sensitive feature. Basically, there is a lexical scope in spacebars helpers. Have a look at this: http://devblog.me/no-data-context.html

The original pull request is here: https://github.com/meteor/meteor/pull/3560

Upvotes: 0

Related Questions