怎么办骨干图像滑块(How to do backbone image slider)

我学习骨干，多在backbone.I我不知道需要使用backbone.Though做形象滑块我可以做使用jQuery像这样

该链接为演示按我requirement.There以下合计3 images.When单击最后一个图像，然后第一次两个图像上消失，新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例子 ，这是完整的介绍主干及其不同的组件。

什么，你需要做的是首套你的内容变成可识别的格，是这样的：

<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为包装，里面没有它。 这是可取的，因为骨干观点有很好的机制，只有与自己的工作内容（看事件和选择 ）。
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"));

这里:)

文章来源: How to do backbone image slider