Question

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

我正在迭代每个元素的图像：

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进行此操作。通常我会解析按钮然后相应加载，但我不确定如何在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());
}

Answer 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/

一个（可能）更干净的解决方案是处理图像集合和选定的模型而不是索引，但这可能对你的需求来说太过分了。

骨干绑定到动态元素

1 个答案: