如何做骨干图像滑块

Question

我正在学习脊骨，在后台不太清楚。我需要用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');
});

任何帮助都会得到支持。

Answer 1

你要找的是主干视图。

我个人非常喜欢TodoMVC实例，它是对主干及其不同组件的完整介绍。

您需要做的是首先将内容包装到一个可识别的div中，如下所示：

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

以及:)