Question

我正在研究流星。我需要从我的js文件中的事件中获取模板的值。我的值在模板中是动态的，我的代码是：

<li class="list-group-item"><span><a href="#" style="color:green" id="click_me" value="{{this}}" class="card-link"> {{stuff_Name}} </a>: {{Price}}<i class="fa fa-inr"></i></span></li>

我希望在js文件中的事件中value={{this}}的值。我怎么能得到它？

-----先谢谢-----

Answer 1

锚标记没有value属性，您可以使用data。一旦值为data-someKey的值在DOM中更新，您就可以使用

var getDataVal = document.getElementById('click_me').getAttribute('data-someKey')

Answer 2

在Meteor中，您可以在Template.events中定义事件处理程序，并使用jQuery或直接从数据上下文本身检索dom中的数据。

以下是依赖数据上下文的示例。假设您的模板看起来像这样。

<template name="myTemplate">
  <ul class="list-group">
    {{#each stuff in lotsOfStuff}}
      <li class="list-group-item">
        <span>
          <a href="#" style="color:green" class="card-link js-card-link">
            {{stuff.stuff_Name}}
          </a>: {{stuff.Price}}<i class="fa fa-inr"></i>
        </span>
      </li>
    {{/each}}
  </ul>
</template>

这里我们迭代一组项目（例如lotsOfStuff）并使用每个项目的属性为每件事物创建一个列表项目（例如stuff_Name和Price）。

现在我们要定义一个单击处理程序来处理任何列表项的单击。为此，我们定义了如下的处理程序。

Template.myTemplate.events({
  // in ieteor, it's best practice to use a class name starting with
  // `js-` for all event handling...that is why I added the `js-card-link`
  // class to the item.
  'click .js-card-link'(event, instance) {
    // stop the browser from handling the click
    event.preventDefault();

    // get whatever data we care about from the data context of this click
    // e.g. you can access your entire stuff object
    var stuffName = this.stuff_Name;
    var price = this.Price

    // you can even get items from your stuff object that were not displayed on the template
    var id = this.stuffId;

    // now do something with the data
  },
});

我们可以依赖数据上下文，因为我们位于{{#each}}块内。如果您不在定义可用数据上下文的块中，那么您始终可以使用jQuery来获取数据。

以下是使用jQuery的示例。再次，使用此模板（注意，我已将数据属性添加到<a>。

<template name="myTemplate">
  <ul class="list-group">
    {{#each stuff in lotsOfStuff}}
      <li class="list-group-item">
        <span>
          <a href="#" style="color:green" class="card-link js-card-link" data-id="{{stuff.stuffId}}">
            {{stuff.stuff_Name}}
          </a>: {{stuff.Price}}<i class="fa fa-inr"></i>
        </span>
      </li>
    {{/each}}
  </ul>
</template>

这是修改过的事件处理程序。

Template.myTemplate.events({
  // in ieteor, it's best practice to use a class name starting with
  // `js-` for all event handling...that is why I added the `js-card-link`
  // class to the item.
  'click .js-card-link'(event, instance) {
    // stop the browser from handling the click
    event.preventDefault();

    // get the value we stored in the data attribute
    var id = instance.$(event.target).data('id');

    // now do something with the data
  },
});

如果值在模板中是动态的，如何从.js事件中获取模板中的值

2 个答案: