流星模板事件 | Meteoric

Meteoric

关注(28)粉丝(399)

流星模板事件

本文介绍了流星模板事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正试图抓住流星，所以对此可能有一个简单的答案，我希望是这样.我有这个功能，当我的按钮被点击时，它可以工作并返回正确的 ID.

$(document).ready(function(){$("按钮").click(function(){var selection = (this.id);boardSpecs[0] = 选择；返回板规格；});});

我想把它变成一个流星点击事件，就像这样.

Template.selectBoard.events({点击按钮":函数(事件){event.preventDefault();var boardType = event.target.id;Session.set('boardType', boardType);警报(板类型)；}});

这是按钮所在的模板.

<div 类 = "容器"><div class = "boardCarousel">{{#each boardList}}<div class = "span1"><div 类 = "缩略图"><img data-src = "{{source}}" alt = "placeholder" class = "img-rounded"><div class = "东西"><h2>{{name}}</h2><p>{{描述}}</p><button type = "button" id = "{{id}}" class = "btn btn-primary">选择</button>

{{/每个}}

解决方案

让我们简化一下.您的按钮定义为:

选择</button>

并且您的事件处理程序正在尝试获取按钮的 id，即 {{id}}.

如果您使用嵌套模板如下:

<div 类 = "容器"><div class = "boardCarousel">{{#each boardList}}{{>木板}}{{/每个}}

<模板名称="板"><div class = "span1"><div 类 = "缩略图"><img data-src = "{{source}}" alt = "placeholder" class = "img-rounded"><div class = "东西"><h2>{{name}}</h2><p>{{描述}}</p><按钮类型=按钮"类=btn btn-primary">选择</button>

然后this在您的事件处理程序中将是单个板的数据上下文，您可以简单地编写:

Template.selectBoard.events({点击按钮":函数(事件){event.preventDefault();var boardType = this.id;Session.set('boardType', boardType);警报(板类型)；}});

我认为这更Meteoric(借用Python的形容词).我还避免使用变量名 id，因为它可能会与自然的 MongoDB 文档标识符 _id 混淆.

I'm trying to get a hold of meteor still so there might be an easy answer to this and i'm hoping that is the case. I have this function which works and returns the correct id when my button is clicked.

$(document).ready(function(){
$("button").click(function(){
    var selection = (this.id);
    boardSpecs[0] = selection;
        return boardSpecs;
    });
});

I want to make this into a meteor click event, something like this.

Template.selectBoard.events({
'click button' : function (event) {
    event.preventDefault();
    var boardType = event.target.id;
    Session.set('boardType', boardType);
    alert(boardType);
    }
});

This is the template where the button exists.

<template name = "selectBoard">
<div class = "container">
    <div class = "boardCarousel">
        {{#each boardList}}
                <div class = "span1">
                    <div class = "thumbnail">
                        <img data-src = "{{source}}" alt = "placeholder" class = "img-rounded">
                        <div class = "something">
                            <h2>{{name}}</h2>
                            <p>{{description}}</p>
                            <button type = "button" id = "{{id}}" class = "btn btn-primary">Select</button>
                        </div>
                    </div>
                </div>
        {{/each}}
    </div>
</div>

解决方案

Let's make this easier. Your button is defined as:

<button type = "button" id = "{{id}}" class = "btn btn-primary">Select</button>

And your event handler is trying to get at the id of the button which is {{id}}.

If you use nested templates as follows:

<template name = "selectBoard">
  <div class = "container">
    <div class = "boardCarousel">
      {{#each boardList}}
        {{> board}}
      {{/each}}
    </div>
  </div>
</template>

<template name="board">
  <div class = "span1">
    <div class = "thumbnail">
      <img data-src = "{{source}}" alt = "placeholder" class = "img-rounded">
      <div class = "something">
        <h2>{{name}}</h2>
        <p>{{description}}</p>
        <button type = "button" class = "btn btn-primary">Select</button>
      </div>
    </div>
  </div>
</template>

Then this in your event handler will be the data context of the individual board and you can simply write:

Template.selectBoard.events({
  'click button' : function (event) {
    event.preventDefault();
    var boardType = this.id;
    Session.set('boardType', boardType);
    alert(boardType);
  }
});

I'd argue that this is more Meteoric (to borrow an adjective from Python).I'd also avoid using the variable name id because of the potential confusion with the natural MongoDB document identifier _id.

这篇关于流星模板事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-22 13:21