Holen Sie sich DOM-element mit meteor Vorlage Helfer

Z.B. mein html ist

<template name="atest">
 <a href="{{route}}" data-test="test">Click</a>
</template>

In meteor Vorlage Helfer, ich möchte in der Lage sein, um wählen Sie den Anker-tag.

Template.atest.route = function() {
 console.log(this.data-test);
};

Ich bin nicht sicher, ob dies getan werden kann oder nicht, aber es kann sicherlich nicht über jede Methode, die ich ausprobiert habe. Ich weiß, es ist ein Weg, um pass-argument in einer Vorlage, aber ich will nicht, dass. Ich möchte in der Lage sein zu wählen, dass der Anker-tag, die Vorlage ist in und tun etwas mit ihm.

Jede Hilfe dankbar die ich bekommen kann.

InformationsquelleAutor Bads | 2013-12-26

20

Nicht Helfer, aber in der rendered Rückruf können Sie tun:
```
Template.atest.rendered = function() {
  var el = this.find("[data-test]");
};
```
Und im event-Handler:
```
Template.atest.events({
  "click a": function( event, template ) {
    var selectEl = template.find("[data-test]"); //Arbitrary element in template
    var targetEl = event.target;                 //Element that triggered the event
    var currentEl = event.currentTarget;         //Element that is handling this event function (the element referenced by "click a")
  }
});
```
Natürlich, Sie könnte auch tun:
```
Template.atest.events({
  "click a[data-test]": function() {
    //...
  }
});
```
Wenn keine dieser Optionen für Sie arbeiten, möchten Sie vielleicht überdenken Sie Ihren Ansatz. Benötigen den Zugriff auf ein element aus einer helper-Funktion bedeutet, dass Sie versuchen, eine prozedurale Programmierstil eher als ein template-driven Stil. Im Allgemeinen, nicht das speichern von Daten auf DOM-Knoten, speichern Sie es in den template-Kontext-Objekt.

Könnten Sie einige zusätzlichen Kontext auf, was genau Sie zu tun versuchen? Gibt es vielleicht einen besseren Weg.

Denken Sie über diese: der Helfer muss aufgerufen werden, um das element. Wie würden Sie in der Lage sein, um Zugriff auf das element, wenn es gar nicht gibt noch?

Edit: hier ist ein template-driven-Ansatz zum anbringen href Attribute zu einer Schablone, je nachdem, wo Sie definiert ist. Im Grunde wollen Sie die notwendigen Daten zu generieren, die link-Vorlage in alle zugehörigen übergeordneten Vorlage. Dann rufen Sie einfach den link Vorlage mit, dass die Daten:

HTML:
```
<body>
  {{> parent1}}
</body>

<template name="parent1">
  <div>
    {{> link linkData}}
  </div>

  <ul>
    {{#each arrayData}}
      <li>{{> link}}</li>
    {{/each}}
  </ul>

  {{#with arbitraryData}}
    {{> parent2}}
  {{/with}}

</template>

<template name="parent2">
  <p>{{> link transformedData}}</p>
</template>

<template name="link">
  <a href="{{href}}">{{text}}</a>
</template>
```
JS:
```
if (Meteor.isClient) {
  Template.parent1.linkData = {
    href: "/path/to/something",
    text: "Parent Template 1 Link"
  };

  Template.parent1.arrayData = [
    { href: "array/path/1", text: "Array path one" },
    { href: "array/path/2", text: "Array path two" }
  ];

  Template.parent1.arbitraryData = {
    link: "/foo/bar/baz",
    name: "Parent Template 2 Link"
  };

  Template.parent2.transformedData = function() {
    return { href: this.link, text: this.name };
  };
}
```
- Im Grunde der gleichen Vorlage generiert werden, paar mal in der DOM. Jetzt bin ich versucht zu befestigen href Eigenschaften des Anker-Tags, basierend auf seiner position in der dom. Aber Sie haben wahrscheinlich Recht, es könnte besser gehen mit events klicken oder hover-route. Jetzt bin ich auch versucht Deps.Autostart mit jquery und das scheint zu funktionieren auch in Ordnung.
- Siehe mein edit. Ich weiß, in Ihrem OP Sie sagen, dass Sie nicht wollen, eine Daten-argument, um Ihre link-template. Gibt es einen Grund, warum? Wie Sie sehen können, in meinem edit, dieser Ansatz ist sehr flexibel und ist wirklich den Meteor Weg, es zu tun. In der #each block, den Sie gar nicht brauchen, um als argument verwenden. Null jQuery benötigt.
- beachten Sie auch, dass, wenn Sie nur die jQuery-innen Ihre Deps.autorun, die Funktion ist nicht wirklich das gehen zu sein, re-run, und sich nicht auf Ihre Vorlagen, wie Sie ändern. Sie müssen Laufwerk die autorun-Funktion mit einem reaktiven Daten-Quelle. Wenn Sie implementieren eine reaktive Datenquelle zu tun, DOM-manipulation im autorun-Funktionen, wie Sie Ihre Daten ändern, sind Sie wirklich in einer Impedanz-Fehlanpassung zwischen Verfahrens-und template-gesteuerte Programmierung. Der Punkt, der Meteor ist template-engine ist, dass es alle diese Sachen für Sie.
- OMG!!! Sie komplett gelöst...ich habe versucht zu kommen mit etwas wie dieser Tage. Danke!! Der Grund, warum ich nicht wollen, übergeben Sie die Daten, da die Daten übergeben werden würde, egal, wo es erzeugt wird, in den DOM, und ich wusste nicht, wie das helfen würde.
InformationsquelleAutor sbking

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.