Question

我正在学习骨干，在骨干中不太了解。我需要使用骨干做图像滑块。虽然我可以使用像this这样的jquery

根据我的要求，链接是演示。共有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');
});

任何帮助都会被提升

Answer 1

您正在寻找的是Backbone Views。

我个人非常喜欢TodoMVC example，这是对Backbone及其不同组件的完整介绍。

您需要做的是首先将您的内容包装成可识别的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>

请注意：

我只使用ID作为包装器，不是。这是首选，因为主干视图只有很好的机制才能使用自己的内容（查看events和selector）。
我将图片包装在<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"));

瞧瞧：）

如何做骨干图像滑块

1 个答案: