How to do backbone image slider

问题:

I am learning backbone and am not aware much in backbone.I need to do image slider using backbone.Though I can do using jquery like this

The link is the demo as per my requirement.There are in total 3 images.When you click on the last image then 1st two images disappears and new 2 images appear.

Can anybody please guide me how to do similarly using backbone.

This is my code using 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');
});

Any help will be upvoted

回答1:

What you are looking for are Backbone Views.

I personally really like the TodoMVC example, which is complete introduction to Backbone and its different components.

What you will need to do is to first wrap your content into a identifiable div, something like:

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

Note that:

1. I only use an ID for the wrapper, not inside of it. It's preferable since backbone views have nice mechanism to work only with its own content (look at events and selector).
2. I wrap images inside a <ul>. Again, only in the purpose of making the structure more meaningful and querying easier.

Then, your view code should look like:

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;
  }
});

And finally, to bind the view to the matching element:

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

And voilà :)