Kontekst "tego" w szablonach obsługi zdarzeń Meteor (używanie kierownic do szablonów)

Szybkie pytanie na temat kontekstu obsługi zdarzeń dla szablonów w Meteorze (z kierownicą).

  • w sekcji dokumentacja o instancjach szablonów ( http://docs.meteor.com/#template_inst ) jest wspomniane, że "obiekty instancji szablonu znajdują się jako wartość tego w utworzonych, wyrenderowanych i zniszczonych wywołaniach szablonu oraz jako argument do programów obsługi zdarzeń"
  • w sekcji Szablony ( http://docs.meteor.com/#templates ) mówi "wreszcie, możesz użyć deklaracji zdarzeń w funkcji szablonu, aby skonfigurować tabelę procedur obsługi zdarzeń. Format jest udokumentowany na mapach zdarzeń. ten argument do obsługi zdarzenia będzie kontekstem danych elementu, który wywołał zdarzenie."
To tylko częściowo prawda. Użyjmy przykładu z docs: 
<template name="scores">
  {{#each player}}
    {{> playerScore}}
  {{/each}}
</template>

<template name="playerScore">
  <div>{{name}}: {{score}}
    <span class="givePoints">Give points</span>
  </div>
</template
Template.playerScore.events({
  'click .givePoints': function () {
    Users.update({_id: this._id}, {$inc: {score: 2}});
  });

Tutaj" ten "kontekst' kliknij .givePoints" obsługa zdarzeń jest rzeczywiście instancją szablonu playerScore. Zmodyfikujmy html: 

<template name="scores">
  <span class="click-me">Y U NO click me?<span>
  {{#each player}}
    {{> playerScore}}
  {{/each}}
</template>

<template name="playerScore">
  <div>{{name}}: {{score}}
    <span class="givePoints">Give points</span>
  </div>
</template>

... i dodać obsługę zdarzeń dla .kliknij-me na szablonie wyników: 

Template.scores.events({
  'click .click-me': function () {
    console.log(this);
  }
});

Teraz, jeśli klikniesz span, co się zaloguje? Obiekt okna! Czego oczekiwałem? Obiekt szablonu! Albo kontekst danych, ale to żadne z nich. Jednak wewnątrz wywołań zwrotnych (np. szablon.wyniki.rendered = function () {... }) kontekstem "this" jest zawsze instancja szablonu.

Myślę, że moje prawdziwe pytanie brzmi: czy to ma coś wspólnego z

    Pluskwa w kierownicy, Meteor czy gdzieś pomiędzy?
  • trochę niekompletna dokumentacja na szablonach?
  • całkowicie źle zinterpretowałem dokumenty lub nie zrozumiałem czegoś fundamentalnego o Meteorze czy kierownicy?
Dzięki!
Author: Konstantin K, 2013-02-28
Source

2 answers

Ten film wyjaśnia pojęcia:

Http://www.eventedmind.com/posts/meteor-spark-data-annotation-and-data-contexts .

Bezpośrednia odpowiedź na twoje pytanie:

ThisArg wewnątrz obsługi zdarzeń powinien wskazywać na kontekst danych. Ale czasami kontekst danych to undefined. Gdy używasz Function.prototype.call(thisArg, ...) w JavaScript, jeśli thisArg jest niezdefiniowany (np. DataContext jest niezdefiniowany), przeglądarka ustawi this równe window. Więc doktorzy nie są źle per se, ale kod obsługi zdarzeń nie chroni przed możliwością niezdefiniowania kontekstu danych. Zgaduję, że zostanie to naprawione w krótkim czasie.

Co zatem tworzy kontekst danych dla szablonu? Zwykle twój główny szablon nie będzie miał nawet kontekstu danych. Innymi słowy, funkcja szablonu jest wywoływana bez obiektu. Jeśli jednak użyjesz helpera bloku {{#with lub iteratora {{#each, dla każdego elementu na liście zostanie utworzony kontekst danych, lub w przypadku z helperem, obiektem.

Przykład: 

var context = {};

<template name="withHelper">
  {{#with context}}
    // data context is the context object
  {{/with}}
</template>

var list = [ {name: "one"}, {name: "two"} ];

<template name="list">
  {{#each list}}
    {{ > listItem }} // data context set to the list item object
  {{/each}}
</template>
 27
Author: cmather,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-01 02:50:09

Pierwszym parametrem w funkcji jest Zdarzenie. Możesz więc użyć celu zdarzenia, aby złapać swój element.

Template.scores.events({
  'click .click-me': function (event, template) {
    console.log(event.target);
    $(event.target).text("O but I did!");
  }
});
 13
Author: Brandon Meyer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-28 16:30:22