在车把中使用JS
[英]Using JS In Handlebars
问题描述
我正在使用把手在带有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>
预先感谢您的帮助。 我是否必须使用其他模板引擎，或者这里忘记了什么？
2 个解决方案
解决方案1
0 2013-07-01 15:30:00
渲染模板后，您可能需要绑定swipe事件。 或者尝试将其绑定到整个“ body”元素，而不是#slider。
document.getElementById('slider')
将失败，因为它将返回null，而滑块位于以下脚本标记中
<script id="description-script" type="text/x-handlebars-template">
解决方案2
0 2013-07-03 07:28:57
在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/
使用Express Handlebars和Angular JS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.