我在节点之后而不是节点之前插入模板时遇到问题。例如:
//Html looks like this
<div class="questions">
<div class="question"></div>
<div class="question"></div>
<div class="question"></div>
</div>
<template name="question">
<div class="question"></div>
</div>
<template name="questionExtraInfo">
<div class="extra"></div>
</template>
我正在努力获得以下内容:
<div class="questions">
<div class="question"></div>
<div class="extra"></div>
<div class="question"></div>
<div class="question"></div>
</div>
在问题事件中调用blaze渲染
Template.question.events({
'click .more-details': function () {
var instance = Template.instance();
Blaze.renderWithData(Template.questionExtraInfo, {}, document.querySelector('.questions'), instance.find('.question')));
});
我只能弄清楚之前或之后如何渲染它?
<div class="extra"></div>
<div class="question"></div>
<div class="question"><div class="extra"></div></div>
答案 0 :(得分:0)
我认为更好的方法是利用反应性:
将您的questions
模板更改为:
<template name="question">
<div class="question"></div>
{{# if shouldIncludeExtra }}
{{> questionExtraInfo }}
{{/if}}
</template>
上面的模板应该在每个循环中。
然后在你的js中:
Template.question.helpers({
'shouldIncludeExtra': function() {
// replace 'n' with the actual index. I think `this.index` is
// provided within #each blocks, or you can use the new `@each` helper.
var index = n;
return Session.get('shouldIncludeExtra' + index);
}
});
然后,在您的点击事件中,您将基于索引的会话变量设置为true
:
Template.questions.events({
'click .question': function(e, tpl) {
var question = e.currentTarget;
// You can probably come up with something better here..
var index = $(question).parent().find('> .question').index(question);
Session.set('shouldIncludeExtra' + index, true);
}
});
由于反应性,当您触发点击事件时,您会立即看到插入内容。
我意识到这并没有真正回答你问题的标题,但它应该能让你获得理想的结果。