怎麼辦骨幹圖像滑塊

Question

我學習骨幹，多在backbone.I我不知道需要使用backbone.Though做形象滑塊我可以使用jQuery做這樣this

鏈接爲演示按我要求。總共有3張圖像。當你點擊最後一張圖像時，前兩張圖像消失，出現新的2張圖像。

任何人都可以請指導我如何做類似的使用骨幹。

這是使用jQuery

<img id="image-1" src="http://lorempixel.com/150/100/abstract"> 
<img id="image-2" src="http://lorempixel.com/150/100/food"> 
<img id="arrow" src="http://placehold.it/50x100"> 
$('#arrow').click(function() { 
    $('#image-1').attr('src', 'http://lorempixel.com/150/100/city'); 
    $('#image-2').attr('src', 'http://lorempixel.com/150/100/sports'); 
}); 

任何幫助將upvoted

Answer 1

你在找什麼都是骨幹查看我的代碼。

我個人非常喜歡TodoMVC example，這是對Backbone及其不同組件的完整介紹。

什麼，你需要做的是首套你的內容變成可識別的格，是這樣的：

<div id="slideshow"> 
    <ul class="images"> 
    <li><img src="http://lorempixel.com/150/100/abstract" /><li> 
    <li><img src="http://lorempixel.com/150/100/food" /><li> 
    </ul> 

    <a class="next" href="#">Next</a> 
</div> 

需要注意的是：

1. 我只用一個ID爲包裝，它內部不是。這是最好的，因爲骨幹視圖有很好的機制，只能使用自己的內容（看看events和selector）。
2. 我將圖像包裝在<ul>內。再一次，只是爲了使結構更有意義，更容易查詢。

然後，您的視圖代碼應該是這樣的：

var MySuperView = Backbone.View.extend({ 
    events: { 
    "click .next": "next" 
    }, 
    interval: 1000, 

    initialize: function() { 
    // this is like a constructor 
    var _this = this; 
    setTimeout(function() { 
     _this.next(); // calling next() every `interval` ms 
    }, _this.interval); 
    }, 

    next: function() { 
    // here goes your logic 
    return false; 
    } 
}); 

最後，該視圖與匹配元件結合：

var view = new MySuperView(); 
view.setElement(document.getElementById("slideshow")); 

瞧:)