怎么办骨干图像滑块 [英] How to do backbone image slider

问题描述

我学习骨干，多在backbone.I我不知道需要使用backbone.Though做图像的滑块我可以做到使用jQuery喜欢的这

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

链接为演示按我requirement.There在总共3 images.When单击最后一张图片上那么1两幅图像消失，新的2图像显示。

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.

这是使用jQuery我的code

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

任何帮助将upvoted

Any help will be upvoted

推荐答案

您在找什么是骨干视图。

What you are looking for are Backbone Views.

我个人很喜欢的 TodoMVC例如，这是完整的介绍主干及其不同组件。

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>

需要注意的是：

1. 我只用一个ID为包装，的不的它里面。这是preferable因为骨干观点有很好的机制，只能用自己的内容合作（看事件和< A HREF =htt​​p://backbonejs.org/#View-dollar相对=nofollow>选择）。


2. 我裹＆LT内部图像; UL＆GT; 。同样，只有在使结构更有意义和查询更容易的目的。

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.

然后，您的看法code应该是这样的：

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

瞧：）

这篇关于怎么办骨干图像滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！