Meteor：使用<script>使jquery脚本正常工作，但使用{{functionName}}不起作用</script>

Question

我正在使用第三方套餐。当我使用代码时，代码可以正常运行。

<template name ="gamePage">

        <h2>Counting down 15 minutes (900 seconds)</h2>
        <div id="CountDownTimer" data-timer="900" style="width: 1000px; height: 250px;"></div>

    <script>

        $("#CountDownTimer").TimeCircles({ time: { Days: { show: false }, Hours: { show: false }}});

    </script>

</template>

然而，当我尝试删除而不是javascript函数在页面中它不起作用。

Template.gamePage.test123 = function() {
    $("#CountDownTimer").TimeCircles({ time: { Days: { show: false }, Hours: { show: false }}});

};

<template name ="gamePage">

        <h2>Counting down 15 minutes (900 seconds)</h2>
        <div id="CountDownTimer" data-timer="900" style="width: 1000px; height: 250px;"></div>

        {{test123}}

</template>

这样做的正确方法是什么？

Answer 1

从模板中移除{{test123}}并使用rendered回调：

Template.gamePage.rendered = function() {
  $("#CountDownTimer").TimeCircles(
    {time: {Days: {show: false}, Hours: {show: false}}}
  );
};

rendered是进行jQuery插件初始化和其他任何需要DOM元素首先出现在页面上的东西的适当位置。