为什么 Turn.js 在 Meteor 应用程序中只工作一次？答案

【问题标题】：Why Does Turn.js Only Work Once in Meteor Application?为什么 Turn.js 在 Meteor 应用程序中只工作一次？
【发布时间】：2015-05-31 04:36:54
【问题描述】：

我想将 Turn.js 集成到一个流星项目中，但是遇到了一个“小”问题，

脚本在我第一次“加载”模板时运行良好，但当我遇到相同的模板时就无法运行。

{{#if correspondances_readingMode}}

<script >

function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({
            // Width

            width:922,

            // Height

            height:600,

            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true

    });
}

// Load the HTML4 version if there's not CSS transform

yepnope({
    test : Modernizr.csstransforms,
    yep: ['../../lib/turn.js'],
    nope: ['../../lib/turn.html4.min.js'],
    both: ['css/basic.css'],
    complete: loadApp
});

</script>

<style>
.page{
       width:400px;
    height:300px;
    background-color:white;
    line-height:300px;
    font-size:20px;
    text-align:center;
}
</style>

        <div class="flipbook">

        {{#each myPost}}

            <div class="page">
            {{{text}}}
            </div>
        {{/each}}
        </div>
{{/if}}

似乎脚本仅在用户第一次遇到模板时才执行，但第二次不会再次启动。

我尝试了很多东西，但我开始认为这是因为车把 {{#if}}

附注：在 chrome 上第二次加载它时，它不会将 turn.js 显示为脚本：

【问题讨论】：

尝试使用模板渲染处理程序docs.meteor.com/#/full/template_onRendered
似乎我无法完成这项工作，即使我创建了另一个在 'correspondances_readingMode' 时调用的模板（因此移除车把并拥有一个唯一的模板，onRendered 不起作用，甚至没有一次）

标签： meteor spacebars meteor-helper turnjs

【解决方案1】：

我遇到了同样的问题。我认为小册子的宽度是在包含 div 的全宽之前计算出来的。我在渲染后设置了 1 秒的延迟，现在它似乎工作正常。

Template.menu.rendered = function(){
setTimeout(function() {
import '/imports/turn.min.js';

    $(window).ready(function() {
        $('#magazine').turn({
                            display: 'double',
                            acceleration: true,
                            gradients: !$.isTouch,
                            elevation:50,
                            when: {
                                turned: function(e, page) {
                                    // console.log('Current view: ', $(this).turn('view'));
                                }
                            }
                        });
    });


    $(window).bind('keydown', function(e){

        if (e.keyCode==37)
            $('#magazine').turn('previous');
        else if (e.keyCode==39)
            $('#magazine').turn('next');

    });
}, 1000);
};

【讨论】：