Question

父Meteor模板是否可以直接访问子模板？理想情况下，我希望将模板与带有API的小部件一起使用。我希望有这样的事情：

的mypage.html

<template name="myPage">
   <div class="widgetContainer"></div>
   <button>submit</button>
</template>

mypage.js

Template.myPage.rendered = function(){
    this.myWidgetInstance = UI.render(Template.myWidget)
    UI.insert(this.myWidgetInstance, $('.widgetContainer')[0]);
}

Template.myPage.events({
    'click button': function(e, template){
         // I don't want this logic to live inside of mywidget.js.
         // I also don't want this template to know about the <input> field directly.
         var val = template.data.myWidgetInstance.getMyValue();
    }
});

mywidget.html

<template name="myWidget">
   <input></input>
</template>

mywidget.js

Template.myWidget.getValue = function(){
    return this.$('input').val();
}

以上不起作用，因为myWidgetInstance.getMyValue()不存在。外部代码似乎没有办法在实例上访问模板助手函数。

是否有人使用Meteor模板的方式我试图在上面使用它们？或者这更适合单独的jQuery小部件？如果是这样，那将是一种耻辱，因为我仍然希望我的小部件模板能够受益于Meteor提供的功能。

Answer 1

可以访问子模板辅助函数。一旦您应用了一些修复，您的示例将起作用：

修正1：getValue()而不是getMyValue()

Template.myPage.events({
    'click button': function(e, template){
         // I don't want this logic to live inside of mywidget.js.
         // I also don't want this template to know about the <input> field directly.
         var val = template.myWidgetInstance.getValue();
         console.log(val);
    }
});

修正2：$('input').val();代替this.$('input').val();

Template.myWidget.getValue = function(){
    return $('input').val();
}

修正3：<input>应该没有关闭标记。

<template name="myWidget">
   <input type="text" value="sample value">
</template>

Meteor模板访问子模板辅助函数

1 个答案: