0

我们的代码中有一个幻灯片，我想根据图像的数量生成按钮。

我正在遍历每个元素的图像：

renderImageButtons: function() {
  images = this.model.attributes.images;
  for (i = 0; i <= images.length; i++) {
    this.$('.image_buttons').append("<li class='"+(i == 0 ? 'selected':'')+"' rel='"+i+"'></li>")
  }
},

并像这样附加事件：

events: {
  'click .image_buttons li': 'changeImage'
},

现在，当我单击 li （只是一个小圆圈）时，我想在该数组中渲染一个特定的图像，但我不确定如何使用 Backbone 来解决这个问题。通常我会从按钮上解析 rel 然后相应地加载，但我不确定如何在 Backbone 中访问该信息，或者是否有更好的方法来做到这一点。

目前我有一个自动旋转图像的旋转图像功能：

rotateImage: function() {

  images = this.model.attributes.images;
  image_index = this.model.attributes.current_image_index;

  if (images && image_index != null) {

    image_index++;

    if (image_index > images.length-1 || !images[image_index]) {
      image_index = 0;
    }

    this.model.set({current_image_index: image_index});
  }
},

现在我需要一个 changeImage 函数，但这是我迷路的地方：

changeImage: function() {
  alert($(this).toString());
}
4

1 回答 1

1

一个解决方案是

  • 将对您的属性的更改绑定current_image_index到您的视图render方法
  • 让changeImage函数选择rel并设置模型属性

例如 ：

ImagesView = Backbone.View.extend({
    events: {
        'click li': 'changeImage'
    },

    initialize: function() {
        this.model.on("change:current_image_index",this.render,this);
    },
    render: function() {
        var images = this.model.get("images"), selected=this.model.get("current_image_index");

        this.$el.html("");
        _.each(images, function(model,ix) {
            this.$el.append("<li class='"+(ix == selected ? 'selected':'')+"' rel='"+ix+"'>"+ix+"</li>")
        },this);
    },

    changeImage: function(e) {
        var $li=$(e.currentTarget).closest("li");
        this.model.set({current_image_index:$li.attr("rel")});
    }
});

var model=new Backbone.Model({
    images:[{id:1},{id:2}],
    current_image_index:0
});
var view= new ImagesView({
    el: $("ul"),
    model:model
});

view.render();

还有一个小提琴http://jsfiddle.net/XFTf4/2/

一个（可能）更清洁的解决方案是处理图像集合和选定的模型而不是索引，但这可能对您的需求来说是多余的。

于 2012-03-15T10:41:38.957 回答