0

我想将 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}}

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

在此处输入图像描述

4

1 回答 1

0

我遇到了同样的问题。我认为小册子的宽度是在包含 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);
};

`

于 2017-01-25T06:04:34.313 回答