Meteor Blaze.renderWithData 如何 InsertAfter 是可能的吗？

Question

我在节点之后而不是之前插入模板时遇到问题。例如：

//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>

Answer 1

我认为更好的方法是利用反应性：

将您的 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);
  }
});

由于反应性，当您触发点击事件时，您会立即看到插入。

我意识到这并不能真正回答您问题的标题，但它应该可以为您带来想要的结果。