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);
  }
});

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

我意识到这并没有真正回答你问题的标题，但它应该能让你获得理想的结果。

Meteor Blaze.renderWithData如何InsertAfter有可能吗？

1 个答案: