3

我想知道如何绑定/设置模板传递参数值以单击流星中模板中项目的事件。

我正在使用带有 Blaze UI 包的 Meteor 0.7.0.1。我的主要想法是使用 Blaze 模板引擎在 Meteor 中构建可重用的自定义组件。我有以下组件目前运行良好，但我希望它更具可定制性并删除一些依赖项。这是我的组件模板，名为postLinks

<template name="postLinks">
    <div id="link-popover-wrapper" >
        <ul class="link-popover">
        {{#each linkOptions}}
            <li><a tabindex="-1" class="link-action" id="link-{{value}}" href="#">{{label}}</a>
            </li>
         {{/each}}
        </ul>
    </div>
</template>

该postLinks组件在myPostItem帮助程序中使用。

Template.myPostItem.events({

    'click .post-item-link-picker': function (evt, tmpl) {
        var tmpPostId = this._id;
        var tempData = {linkOptions:[{label:'Favorite', value : 'favorite'},{label:'Wish list', value : 'wishlist'},{label:'Later', value : 'later'}, {label:"Read", value:"read"}]};

        var linkContent = Template.postLinks(tempData);
        $(".item-link-picker").popover({
            content: linkContent, html: true, placement: 'bottom', trigger: "manual",
            template: "UI_POPOVER_TEMPLATE"});
            $("#item-link-picker-"+tmpPostId).popover('show');
    },

    'click .link-action': function (evt, tmpl) {
        //.... some code here to update link selection in db
    }
});

上面的代码工作正常，我想改进它以使其具有以下

  • 在外部传递项目单击事件以绑定到link-action喜欢

经过上述两次更改后，它将如下所示：

Template.myPostItem.events({

    'click .post-item-link-picker': function (evt, tmpl) {
        var tmpPostId = this._id;
        var tempData = { itemClick:function(){}, linkOptions:[{label:'Favorite', value : 'favorite'},...]};
        var linkContent = Template.postLinks(tempData);
        $(".item-link-picker").popover({
            content: linkContent, html: true, placement: 'bottom', trigger: "manual",
            template: "UI_POPOVER_TEMPLATE"});
        $("#item-link-picker-"+tmpPostId).popover('show');
    }
});

我缺乏如何/在哪里将传递的事件处理函数绑定到link-action模板或助手中的元素的知识。如果有人可以帮助找到一种方法，我真的很感激。

4

1 回答 1

6

你反过来使用jQuery事件触发系统，所以

Template.myPostItem.events({
  'click .link-action': function (evt, tmpl) {
     $(evn.target).trigger('post-link-action', this /* extra data */);
  },
});

可以在任何父模板中轻松捕获此事件：

<template name="someOtherTamplate">
  {{> myPostItem}}
</template>


Template.someOtherTemplate.events({
  'post-link-action': function (evt, tmpl, extra) {
     // the user of your component can define their custom behavior here
   },
});

请注意，事件extra参数仅在下一个Meteor版本中支持。目前（0.8.0）它包含在devel分支中。

于 2014-04-16T15:36:47.300 回答