在Handlebars中使用JS

Using JS In Handlebars

本文关键字：JS Handlebars      更新时间：2023-09-26

我使用手把在一个简单的移动网页上使用swipejs模板。我制作了一个没有模板引擎的网页原型，效果很好。然后，我研究了网络，寻找一个好的模板引擎，并找到了把手。

我把网页的正文嵌入到一个脚本标签中，这样车把就可以工作了。除了swipejs（我用它来处理图像）之外，一切都很好。

以下是我的HTMl:的摘要版本

<html>
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=no" />
    
    <link media="Screen" href="styles.css" type="text/css" rel="stylesheet" />
    <link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/handlebars.js"></script>
    <script src="scripts/app.js"></script>
    <script src='scripts/swipe.js'></script>
    <!--[if IEMobile]>
    <link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />
    <![endif]-->
</head>
<body>
    <script id="description-script" type="text/x-handlebars-template">
    <h1>Main Title</h1>
    <div id="pictures">
        <div id="slider" class="swipe">
            <div class="swipe-wrap">
                <div><center><img style="width:95%;height:auto;" src="image link 1"/></center></div>
                <div><center><img style="width:95%;height:auto;" src="image link 2"/></center></div>
                <div><center><img style="width:95%;height:auto;" src="image link 3"/></center></div>
            </div>
        </div>
    </div>
    <h2>Description</h2>
        <div id="description">
            {{description}}
    </div>
</script>
<script>
            //swipe script
    window.mySwipe = Swipe(document.getElementById('slider'),
    {
        auto: 3000,
        speed: 300
    });
</script>
</body>

提前感谢您的帮助。我是否必须使用不同的模板引擎，或者这里有什么东西我忘记了？

您可能需要在模板渲染后绑定滑动事件。或者尝试将其绑定到整个"body"元素，而不是#slider。

 document.getElementById('slider')

将失败，因为它将返回null，而滑块位于以下脚本标记中

 <script id="description-script" type="text/x-handlebars-template">

在app.js中呈现description-script模板后，您需要立即将Swipe(...)代码移动到。

类似于：

// Compile the template
var template = Handlebars.compile($('#description-script').html());
// Render the template
// This makes the #slider DIV appear in the DOM
var data = { description: 'Photos' };
$('body').append(template(data));
// Start Swipe
window.mySwipe = Swipe($('#slider').get(0), {
   auto: 3000,
   speed: 300
});

请参阅以下JSFiddle（从@TommyBs派生）：http://jsfiddle.net/b4ta3/2/

相关文章：