Question

嗨，我有这个模板

<template name="users">
   {{#each user}}
    <li id="{{_id}}"> 
        <input type="checkbox" checked /> 
        <span><select name="colorpicker">
                {{#each color}}
                  <option value="{{mColorCode}}" {{selected ../mColor mColorCode}}>{{mColorName}}</option>
                {{/each}}
              </select>
        </span>
        <img width="40"  src="data:image/png;base64,{{mImage}}" />  
        <span class="name">{{mUsername}}</span>
        <p><span class="description">{{mDescription}}</span></p>  
    </li>  
    {{/each}}
</template>

我想要做的是在渲染模板后，我想将下拉列表转换为颜色选择器。我正在使用jquery插件

Template.users.rendered = function(){
      $('select[name="colorpicker"]').simplecolorpicker({picker: true});
}

问题有时无法解决，（有时在dom准备好之前进行调用。）

我希望在呈现所有内容后调用此插件。而不是每个添加的用户，我该怎么做？

由于

Answer 1

我发现Meteor有点搞笑它渲染模板的频率，jQuery函数最终可能会累积起来。

我已经开始添加console.log("users rendered");来了解触发渲染回调的次数和次数。

我取得了一些成功的一件事就是将该模板包装在另一个模板中，然后将回调绑定到外部模板。像这样：

<template name="container">
    {{> users}}
</template>
<template name="users">
   {{#each user}}
    <li id="{{_id}}"> 
        <input type="checkbox" checked /> 
        <span><select name="colorpicker">
                {{#each color}}
                  <option value="{{mColorCode}}" {{selected ../mColor mColorCode}}>{{mColorName}}</option>
                {{/each}}
              </select>
        </span>
        <img width="40"  src="data:image/png;base64,{{mImage}}" />  
        <span class="name">{{mUsername}}</span>
        <p><span class="description">{{mDescription}}</span></p>  
    </li>  
    {{/each}}
</template>

这只是将回调添加到容器

Template.container.rendered = function(){
      $('select[name="colorpicker"]').simplecolorpicker({picker: true});
      console.log("rendered");
}

不完全确定它为什么有效，但它对我有用，希望有人可以照亮我们两个。

Answer 2

这是我使用的解决方案，如果有人有更好的解决方案，那也是一个黑客，请发布。

我做的是将渲染的模板放在我的集合的订阅的回调中。

所以我的代码是这样的：

Meteor.subscribe('trackedUser',function(){
  Template.users.rendered = function(){
  ......
  }
}

Answer 3

我认为这是一个相当古老的帖子，但由于我遇到了问题，我认为我找到了一个更好的方法，现在就是这样。即使在内容呈现时，包含模板在技术上也将呈现。在我的情况下，我试图初始化一个物化模式。使它工作它必须做以下。

template.html

<div class="row" id="eventResults">
  {{#each eventResults}}
    {{> eventResult}}
  {{/each}}
</div>

<template name="eventResult">    
  <div class="modal event" id="{{id}}">
    <div class="modal-content">
    ...

和template.js

Template.eventResult.onRendered(function(){
  this.$('.modal-trigger').leanModal();

通过使用this.$('...')调用子元素和的onRendered上的代码，代码不会为每个元素多次调用，只需每次调用一次。

在Meteor.template.rendered中如何在渲染完所有内容后进行调用（在{{#each}}循环结束后）

3 个答案: