在把手中使用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

回答

相關問題