使用流星模板助手獲取DOM元素

Question

例如，我的HTML是

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

在流星模板助手中，我希望能夠選擇錨標記。

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

我不確定這是否可以做到，但當然，不能通過我嘗試的任何方法來完成。 我知道有一種方法可以在模板實例中傳遞參數，但我不希望這樣。 我希望能夠選擇模板實例所在的錨標記並對其執行某些操作。

感謝我能得到的任何幫助。

Answer 1

不在幫助程序中，但在rendered回調中，您可以執行以下操作：

Template.atest.rendered = function() {
  var el = this.find("[data-test]");
};

在事件處理程序中：

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")
  }
});

當然，你也可以這樣做：

Template.atest.events({
  "click a[data-test]": function() {
    // ...
  }
});

如果這些選項都不適合您，您可能需要重新評估您的方法。 需要從輔助函數訪問元素表示您正在嘗試使用過程編碼樣式而不是模板驅動樣式。 通常，不要將數據存儲在DOM節點上，將其存儲在模板的上下文對象中。

你能否提供一些關於你究竟要做什么的額外背景？ 可能有更好的方法。

想一想：必須調用幫助器才能呈現元素。 如果元素甚至不存在，您將如何訪問該元素？

編輯：這是一種模板驅動的方法，用於將href屬性附加到模板，具體取決於模板的定義位置。 基本上，您希望包含必要的數據以在任何關聯的父模板中生成鏈接模板。 然后，只需使用該數據調用鏈接模板：

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 };
  };
}

使用流星模板助手獲取DOM元素

問題描述

1 個解決方案

解決方案1
20 已采納 2013-12-26 07:52:17

使用流星模板助手獲取DOM元素

問題描述

1 個解決方案

解決方案1 20 已采納 2013-12-26 07:52:17

解決方案1
20 已采納 2013-12-26 07:52:17