1

你好我有这个模板

<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 准备好之前进行调用。）

我想在渲染完所有内容后调用这个插件。而不是每个添加的用户，我该怎么做？

谢谢

4

3 回答 3

2

我发现 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");
}

不完全确定它为什么有效，但它对我有用，希望有人能照亮我们俩。

于 2013-07-01T16:43:47.993 回答
0

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

我所做的是将渲染的模板放在我收藏的订阅回调中。

所以我的代码是这样的：

Meteor.subscribe('trackedUser',function(){
  Template.users.rendered = function(){
  ......
  }
}
于 2013-07-04T10:58:44.767 回答
0

我看到这是一篇很老的帖子，但是由于我遇到了问题，并且我认为我找到了更好的方法，所以就在这里。即使内容正在呈现，包含模板也会在技术上被呈现。就我而言，我试图初始化一个物化模态。为了使其工作，它必须执行以下操作。

模板.html

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

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

和模板.js

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

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

于 2015-07-23T23:38:41.693 回答