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 を解析し、それに応じてロードしますが、バックボーンでその情報にアクセスする方法や、これを行うためのより良い方法があるかどうかはわかりません。

現在、画像を自動回転する画像回転機能があります。

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 に答える