在把手中使用JS

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

我将我的网页正文嵌入到脚本标记中，因此句柄可以工作。一切工作正常，除了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>

预先感谢您的帮助。我将不得不使用不同的模板引擎，或者我忘记了这里有什么东西吗？

来源

2013-07-01 Matthew Gray

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

document.getElementById('slider')

也将失败，而滑块坐在下面的脚本标签

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

来源

2013-07-01 15:30:00 TommyBs

我想你的解决方案，但没有奏效。 –

您尝试在呈现后绑定滑动吗？ http://jsfiddle.net/nGULk/这个小提琴适用于我（原谅CSS /造型） – TommyBs

你需要将你的Swipe(...)代码immedately后您呈现description-script模板app.js它会返回null。

喜欢的东西：

// 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/

来源

2013-07-03 07:28:57 lazd

在把手中使用JS

回答

相关问题